diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 6d1389bf2..8df47855a 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -1,7 +1,6 @@ import { InputProps } from "@material-ui/core/Input"; import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; -import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { FetchMoreProps } from "@saleor/types"; import classNames from "classnames"; import Downshift, { ControllerStateAndHelpers } from "downshift"; @@ -74,8 +73,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC c.value === selectedItem).length === 0 : false; - const hasInputValueChanged = prevDisplayValue !== displayValue; - if (hasInputValueChanged) { + const choiceFromInputValue = choices.find( + ({ value: choiceId }) => choiceId === inputValue + ); + + const isValueInValues = !!choiceFromInputValue; + + const isValueInLabels = !!choices.find( + choice => choice.label === inputValue + ); + + const ensureProperValues = (alwaysCheck: boolean = false) => { + if (allowCustomValues && !alwaysCheck) { + return; + } + + if (isValueInValues && !isValueInLabels) { + reset({ inputValue: choiceFromInputValue.label }); + return; + } + reset({ inputValue: displayValue }); - } + }; - const displayCustomValue = + const displayCustomValue = !!( inputValue && inputValue.length > 0 && allowCustomValues && - !choices.find( - choice => - choice.label.toLowerCase() === inputValue.toLowerCase() - ); + !isValueInLabels + ); const handleBlur = () => { - if(inputValue) + ensureProperValues(true); + closeMenu(); + }; + + // fix for bug where input value is returned from debounce as id instead of label + if (value === inputValue && inputValue !== "") { + ensureProperValues(); } return (