Несколько элементов ввода фокусируются ⇐ CSS

[Anonymous]

У меня есть два OutlinedInput в пользовательском интерфейсе, когда я нажимаю на любой из них, оба фокусируются. Я попробовал использовать обычный тег ввода HTML, чтобы проверить, обычные элементы ввода работают нормально. Я приложил скриншот пользовательского интерфейса и код. Первый фрагмент — это файл моего компонента, а второй — файл CSS.

Код: Выделить всё

import React from 'react';
import { useState } from 'react';

import Grid from '@mui/material/Grid';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputAdornment from '@mui/material/InputAdornment';
import '../App.css'
import FormHelperText from '@mui/material/FormHelperText';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import  FormControl  from '@mui/material/FormControl';
import { Input } from '@mui/material';

const LeftComponent = ({splitterObj,setSplitterObj}) => {

const handleBillChange = (e)=>{
console.log(splitterObj);
setSplitterObj({...splitterObj, bill: e.target.value})
}
const handleTipChange = (e)=>{
setSplitterObj({...splitterObj, customTip:e.target.value})
}
const handlePersonChange = (e)=>{
setSplitterObj({...splitterObj, noOfPeople: e.target.value,errorNoOfPeople:false})
}

return (



Bill





Select Tip %



5%
10%
15%
25%
50%





Number of People
{splitterObj.errorNoOfPeople&&(Can't be zero)}





);
}

export default LeftComponent;

`


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Mono';
color: hsl(183, 100%, 15%);
}
body{
background-color: #c5e4e7;
}
.text-top{
min-width: 450px;
margin-top: 3vh ;
font-size: 1.5rem;
letter-spacing: 11px;
font-weight: 700;
}
.content{
background-color: white;
padding: 32px;
/* width: 70vw !important; */
min-width: 450px;
border-radius: 24px;
margin: 5vh auto !important;
}
.text-input{
text-align: right;
width: 100% !important;

}
.tip-custom{
height: 7vh;
width: 100%;
border: none;
background-color: #2bc1af !important;
}
.tip-button{
height: 56px;
font-size: 1.5rem !important;
width: 100%;
font-family: 'Space Mono' !important;
background-color: hsl(183, 100%, 15%) !important;
transition: background-color 0.3s;;

}
.tip-button:hover{
background-color: #2bc1af !important;
color:hsl(183, 100%, 15%)
}

/* Right content */

.right-content{
background-color: hsl(183, 100%, 15%);
height: 100%;
border-radius: 13px;
padding: 4vh 3vw;
}
.reset-button{
width: 100% !important;
padding:10px;
background-color: #2bbba6 !important;
color: hsl(183, 100%, 15%) !important;
font-size: 1rem !important;
}

`
Я пытаюсь для реализации простого пользовательского интерфейса. Оба ввода фокусируются, я просто хочу, чтобы щелкнул только один, чтобы сфокусироваться
Скриншот пользовательского интерфейса

Подробнее здесь: https://stackoverflow.com/questions/784 ... ng-focused