javascript - Hur kan jag förhindra att min datumväljare får fokus igen efter att ha klickat på ett annat inmatningsfält

Jag har en Material Datepicker som öppnas om du klickar på det textfält det tillhör. Om du försöker välja ett annat textfält medan datepickern är öppen kommer den att rikta/fokusera tillbaka till datepickern.

Notera: Detta problem uppstår också när man riktar mot ingenting, det kommer att fokusera om datumväljaren igen efter att den stängts.

Exempel Demo: https://stackblitz.com/edit/react-b4xpki?file=demo.tsx

Kod :

`

export default function BasicDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  const [open, setOpen] = React.useState(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TextField placeholder='Click here while datepicker is opened' fullWidth={true} sx={{mb:2, mr: 2}}/>
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        renderInput={(props) => (
          <TextField {...props} onClick={(e) => setOpen(true)} />
        )}
      />
    </LocalizationProvider>
  );
}

Så hur reproducerar man problemet?

  1. Klicka på datumväljaren (inte ikonen)
  2. Klicka på ett annat textfält
  3. Se hur målet/fokus är tillbaka på datumväljaren

Svar #1

Du kan skapa ett fokusnamnat tillstånd så att du kan kontrollera det i onFocus på <TextField />

för det första, skapa ett fokus med namnet state:

const [focus, setFocus] = useState(false);

TextField: om open är falskt i onFocus, bör currentTarget inte fokuseras.

 <TextField
     {...props}
      onFocus={(e) => {
          setFocus(open);
          if (!open) {
             e.currentTarget.blur();
             return;
          }
      }}
      focused={focus}
      onClick={(e) => setOpen((prev) => !prev)}
 />

om värdet ändras i DatePicker, bör focus vara sant.

<DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
       setFocus(true);
    }}
    ...otherProps
/>

länk: https://stackblitz.com/edit/react-b4xpki-rirdxn?file=demo.tsx

Relaterade artiklar