refactor autocomplete single value field
@@ -207,13 +207,7 @@ export const AutoCompleteSingleValue = function (props: AutoCompleteSingleValueP
autoCompleteDebug("optionsForRender:", options, optionsForRender);
- return (
- <Autocomplete
- openOnFocus
- noOptionsText={noOptionsText}
- options={options}
- size="small"
- groupBy={(value) => {
+ const getOptionFromValue = (value: string, callback: (op: AutoCompleteForRenderOption) => string): string => {
if (!optionsForRender) {
return NO_GROUP;
}
@@ -224,40 +218,22 @@ export const AutoCompleteSingleValue = function (props: AutoCompleteSingleValueP
return value;
}
- return option.group;
- }}
+ return callback(option);
+ };
+
+ return (
+ <Autocomplete
+ openOnFocus
+ noOptionsText={noOptionsText}
+ options={options}
+ size="small"
+ groupBy={(value) => getOptionFromValue(value, (op) => op.group)}
filterOptions={createFilterOptions({
ignoreCase: true,
matchFrom: "any",
- stringify: (value: string) => {
- if (!optionsForRender) {
- return value;
- }
-
- const option = optionsForRender?.find((x) => x.value === value);
-
- if (!option) {
- return value;
- }
-
- return option.label;
- },
+ stringify: (value) => getOptionFromValue(value, (op) => op.label),
})}
- getOptionLabel={(value: string) => {
- if (!optionsForRender) {
- return value;
- }
-
- const option = optionsForRender?.find((x) => x.value === value);
-
- if (!option) {
- return value;
- }
-
- autoCompleteDebug("getOptionLabel:", value, option);
-
- return option.label;
- }}
+ getOptionLabel={(value) => getOptionFromValue(value, (op) => op.label)}
renderOption={(value) => {
if (!optionsForRender) {
return value;
@@ -272,7 +248,7 @@ export const AutoCompleteSingleValue = function (props: AutoCompleteSingleValueP
autoCompleteDebug("renderOption:", value, option);
return (
- <div className={groupUl} key={option!.label}>
+ <div className={groupUl} key={option!.label} data-value={value}>
<Typography>{option!.label}</Typography>
</div>
);
@@ -310,7 +286,6 @@ export const AutoCompleteSingleValue = function (props: AutoCompleteSingleValueP
onBlur={onBlur}
forcePopupIcon={true}
onChange={(_: any, value: string | null) => {
- autoCompleteDebug("onChange value:", value);
onChange(value);
}}
renderInput={(params) => {
