djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #786 from mirumee/Fix-single-autocomplete-select-inputs

Browse source 
Fix single autocomplete select inputs
This commit is contained in:
Marcin Gębala 2020-10-23 10:04:28 +02:00 committed by GitHub
commit 1bfc13c8b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -1,7 +1,6 @@
import { InputProps } from "@material-ui/core/Input"; import { InputProps } from "@material-ui/core/Input";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { FetchMoreProps } from "@saleor/types"; import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames"; import classNames from "classnames";
import Downshift, { ControllerStateAndHelpers } from "downshift"; import Downshift, { ControllerStateAndHelpers } from "downshift";
@ -74,8 +73,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
} = props; } = props;
const classes = useStyles(props); const classes = useStyles(props);
const [prevDisplayValue] = useStateFromProps(displayValue);
const handleChange = ( const handleChange = (
item: string, item: string,
stateAndHelpers: ControllerStateAndHelpers stateAndHelpers: ControllerStateAndHelpers
@ -116,21 +113,47 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
choices && selectedItem choices && selectedItem
? choices.filter(c => c.value === selectedItem).length === 0 ? choices.filter(c => c.value === selectedItem).length === 0
: false; : false;
const hasInputValueChanged = prevDisplayValue !== displayValue;
if (hasInputValueChanged) { const choiceFromInputValue = choices.find(
reset({ inputValue: displayValue }); ({ value: choiceId }) => choiceId === inputValue
);
const isValueInValues = !!choiceFromInputValue;
const isValueInLabels = !!choices.find(
choice => choice.label === inputValue
);
const ensureProperValues = (alwaysCheck: boolean = false) => {
if ((allowCustomValues || isValueInLabels) && !alwaysCheck) {
return;
} }
const displayCustomValue = if (isValueInValues && !isValueInLabels) {
reset({ inputValue: choiceFromInputValue.label });
return;
}
reset({ inputValue: displayValue });
};
const displayCustomValue = !!(
inputValue && inputValue &&
inputValue.length > 0 && inputValue.length > 0 &&
allowCustomValues && allowCustomValues &&
!choices.find( !isValueInLabels
choice =>
choice.label.toLowerCase() === inputValue.toLowerCase()
); );
const handleBlur = () => {
ensureProperValues(true);
closeMenu();
};
// fix for bug where input value is returned from debounce as id instead of label
if (value === inputValue && inputValue !== "") {
ensureProperValues();
}
return ( return (
<div <div
className={classNames(classes.container, className)} className={classNames(classes.container, className)}
@ -149,7 +172,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
), ),
error, error,
id: undefined, id: undefined,
onBlur: closeMenu, onBlur: handleBlur,
onClick: toggleMenu onClick: toggleMenu
}} }}
error={error} error={error}