mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.84k stars 32.25k forks source link

[material-ui][Autocomplete] Input is not resetting on value changes with `freeSolo` prop #40099

Open vadimka123 opened 11 months ago

vadimka123 commented 11 months ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/awesome-lucy-vtndj5?file=%2Fsrc%2FApp.tsx%3A17%2C3

Steps:

  1. Select any value
  2. Click on reset value button

Current behavior 😯

input is not resetting on value changes with freeSolo prop

Expected behavior 🤔

input is resetting on value changes with freeSolo prop without this prop all good works https://codesandbox.io/p/sandbox/quiet-sky-xvllpd?file=%2Fsrc%2FApp.tsx

Context 🔦

Autocomplete which having reset values in some cases with enabled freeSolo

Your environment 🌎

  System:
    OS: macOS 14.1.2
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 119.0.6045.199
    Edge: Not Found
    Safari: 17.1.2
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.25 
    @mui/core-downloads-tracker:  5.14.19 
    @mui/icons-material: 5.14.19 => 5.14.19 
    @mui/material: 5.14.19 => 5.14.19 
    @mui/private-theming:  5.14.19 
    @mui/styled-engine:  5.14.19 
    @mui/styles: 5.14.19 => 5.14.19 
    @mui/system:  5.14.19 
    @mui/types:  7.2.10 
    @mui/utils:  5.14.19 
    @types/react:  18.2.41 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
vadimka123 commented 11 months ago

Related to https://github.com/mui/material-ui/pull/28190 I agreed with fact that input not should resetting on focus lose, but it should resetting on real value changes

ZeeshanTamboli commented 10 months ago

I agree it's a bug. Would you like to work on it?

vadimka123 commented 10 months ago

@ZeeshanTamboli clearOnBlur={true} helped me

SasankaAc commented 7 months ago

Facing the same issue.. clearOnBlur={true} wont fix this as it change the flow. When i use clearOnBlur text value in the text field is getting reset on every blur event. But its kind of a work around to skip this bug.

How ever its not a fix for this issue.

duynguyen-kun commented 1 week ago

Any progress on this anyone? I'm encountering the same issue. I'm looking at this Search Input of the document. So, I wanna separate between selecting an option and input's onChange

   <Autocomplete<Value, Multiple, true, true>
                autoFocus={autoFocus}
                disabled={disabled}
                disableCloseOnSelect={disableCloseOnSelect}
                fullWidth
                multiple={multiple}
                options={options}
                onChange={handleOnChangeAutocomplete}
                value={autocompleteValue}
                ref={ref}
                required={required}
                renderInput={renderInput}
                {...autocompleteProps}
// With freeSolo enabled, input should be reset after onChange but it's not
                freeSolo
                disableClearable
                open
                forcePopupIcon={false}
                PopperComponent={PopperComponent}
                PaperComponent={(props) => PaperComponent({ paperFooter, paperHeader, ...props })}
              />