[Autocomplete] Label of the TextField shrinks when there is an option selected while the label of a normal filled TextField doesn't

[bartvanenter]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I have a form that includes both TextField components and Autocomplete components.

When entering the page the label of the Autocomplete shrinks with a transition, while the label of the TextField has already been shrunken and is in the right place.

This is not really consistent and makes the form look messy.

Expected behavior:

When an option has been selected in the Autocomplete the label should already start shrunken, just like the TextField component.

While the Autocomplete component has a value, the inputProps.value of the Autocomplete is empty at the first render which causes the label to be positioned inside the TextField.

Then on the third render the inputProps.value is filled with the value that is provided to the Autocomplete, which causes the label to shrink to the top left of the TextField.

See the screenshot below:

I found a workaround for this issue that fills the input with the inputProps.value when the TextField gets focus and using the option label of the provided value when the input doesn't have focus. See code below:

const { onMouseDown, onBlur, onFocus, ...inputProps } = getInputProps();

inputProps.value = isFocused
    ? inputProps.value
    : getOptionLabel(value);

I think this happens because in the useAutocomplete hook on line 159 the inputValue.default is set to an empty string, and later it will be filled with the value in an useEffect.

Examples 🌈

Kapture.2023-03-17.at.11.33.17.webm

See codesandbox for this example

Motivation 🔦

Would be nice if the behavior of the input labels would be consistent and less jumpy and messy.

[mj12albert]

@bartvanenter Thanks for reporting this, I agree that the transition on the Autocomplete is not ideal and it should behave like the TextField instead

[bartvanenter]

The solution I provided above was not working for all the use cases though. Here is a more extensive solution.

    function getInputValue() {
        if (multiple && !isFocused) {
            return '';
        }

        // Fill input with value in input
        if (isFocused || inputProps.value) {
            return inputProps.value;
        }

        // Fill input with selected value
        if (value !== null && value !== undefined) {
            return getOptionLabel(value as AutocompleteFreeSoloValueMapping<FreeSolo> | T);
        }

        return '';
    }

    inputProps.value = getInputValue();

[sai6855]

@mj12albert if you haven't started working on this, can you assign it to me.

[mj12albert]

@mj12albert if you haven't started working on this, can you assign it to me.

@sai6855 Done, thank you 🙌

[sai6855]

this issue is fixed in #36741

codesandbox: https://codesandbox.io/s/gracious-kepler-8x67ex

@bartvanenter fix will be released in next release

[bartvanenter]

Thank you very much!!

[rblackledge-shibumi]

We ran across this issue too, and it appears to still be happening in the latest release. See codesandbox:
https://codesandbox.io/s/compassionate-bush-69vtqq?file=/demo.tsx

I think the codesandbox @sai6855 posted works because it was setting inputValue and value, which I believe is the workaround @bartvanenter mentioned. If inputValue is removed, the label still animates incorrectly.

Can we re-open this issue?

[ewarrenG]

+1 seeing this with ^5.14.14 autocomplete element

[ZeeshanTamboli]

@rblackledge-shibumi @ewarrenG The issue is tracked in #44506, and I'm working on a fix in #44873.