[Autocomplete] Add getOptionSelected prop #18443

miguelbalboa · 2019-11-18T22:39:35Z

I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

To bring more flexibility to the Autocomplete component, It will be great to be able customize the behavior on when an option should be selected by exposing a getOptionSelected prop similar to getOptionDisabled.

Examples 🌈

const RoleSelect = (props) => {


  const [role, setRole] = useState();
  /*
   * options format is: [{id: 1, name: "The Role"}]
   */
  const { options: optionsProp } = props;
  
  return (
    <Autocomplete
      value={role}
      options={optionsProp}
      filterOptions={(options, state) => {
        /*
         * Custom function returns a transformed array of options with the format:
         * [{item: {id: 1, name: "The Role"}, matches: []}]
         */
        return myCustomFuse.search(options, state.inputValue)
      }}
      getOptionSelected={(option, { multiple, value }) => {
         if (!multiple) {
          /*
           * PROPOSAL for single selection, be able to provide own logic.
           */     
          return (option.item.id === value.id);  
         }

         return false;
      }}
      renderOption={(option) => {
        /*
         * matches property is used with a custom Highlight component. 
         */
        return (
          <Highlight matches={option.matches}>
            {option.item.name}
          </Highlight>
        );
      }},
      onChange={(event, newValue) => {
        // Only need the item in the value, ignore matches property.
        setRole(newValue.item)
      }}
    />
  )
  
}

Motivation 🔦

Currently I'm trying to use https://fusejs.io/ in the prop filterOptions to filter the options, but fuseJs wraps the options on another object, a simple comparison as in here won't work. also I think adding getOptionSelected will allow to compare by id if is wished value.id === option.id. Let me know your thoughts and if you have a better way to accomplish what I'm trying to do, thanks!

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2019-11-18T22:49:54Z

@miguelbalboa I'm not sure that getOptionSelected() would cover all the problems. Returning a different structure in the filter step impacts getOptionLabel and onChange too. Would you confirm?

oliviertassinari · 2019-11-18T22:51:43Z

What's wrong with?

<Autocomplete
  value={role}
  options={optionsProp}
  filterOptions={(options, state) => {
    /*
     * Custom function returns a transformed array of options with the format:
     * [{item: {id: 1, name: "The Role"}, matches: []}]
     */
    return myCustomFuse.search(options, state.inputValue).map(x => {
      x.item.matches = x.matches
      return x.item
    })
  }}
/>

miguelbalboa · 2019-11-18T23:53:01Z

Hi @oliviertassinari, yes, returning a different structure will impact getOptionLabel and onChange, the developer should be aware of that, maybe is not a good idea. There is noting absolute wrong in your example, actually I'm goin to use it in that way right now, Thank you!

Coming back to the initial proposal about exposing getOptionSelected, usually I get the initial selected value from a different source that the options Array. that means that initially, the Object value will be different from the Object option, just doing value === option as in useAutocomplete will not initially select the option.

const RoleSelect = () => {

  // Value will come from different source with a pre-populated initial value.
  const [role, setRole] = useState({
    id: 2,
    name: "Second Role"
  });

  // Options are in different source
  const [roles, setRoles] = useState([
    {id: 1, name: "My Role"},
    {id: 2, name: "Second Role"}
  ]);

  // Because role is a different Object that roles[1], the selected option will not be highlighted. 
  return (
    <Autocomplete
      value={role}
      options={roles}
      getOptionLabel={role => role.name}
      onChange={(event, newValue) => {
        setRole(newValue);
      }}
      renderInput={params => (
        <TextField {...params} label="Role select" fullWidth />
      )}
    />
  );
};

That is why I thought about providing a way to specifically do value.id === option.id. Let me know if you have a better solution for this case. Thanks!

oliviertassinari · 2019-11-19T13:10:18Z

@miguelbalboa This is interesting, they are ways to work around the problem, but it seems valid but a getOptionSelected prop could make it simpler. I think that we would accept a pull request for it.

miguelbalboa · 2019-11-19T19:10:02Z

Great! I will work in the pull request.

rovnyart · 2019-11-22T19:54:46Z

+1. Also need this feature, because in my case value object and any of options objects cannot be simply compared, i need some way to compare value.id with option.id, maybe need some getOptionValue prop as in react-select

oliviertassinari · 2019-11-24T11:32:46Z

We have a use case in the documentation for this method: http://material-ui.com/components/autocomplete#asynchronous-requests. The options are fetched from the network, they don't match with a previously selected value.

florleb · 2019-11-27T16:23:15Z

Any news about this the PR from this issue ?

oliviertassinari · 2019-11-27T16:27:44Z

@florleb Do you want to give it a shot?

florleb · 2019-11-27T16:38:03Z

@florleb Do you want to give it a shot?

I wish i could if i was better :/. What should i do ?

SandraMarcelaHerreraArriaga · 2019-11-29T18:42:26Z

Hello @florleb are you working on it?

oliviertassinari · 2019-11-30T11:08:20Z

Regarding the changes, I think that it could go with something in this order:

diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
index acd873074..fb9c2d4b5 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.tsx
+++ b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -59,6 +59,7 @@ export default function Asynchronous() {
       onClose={() => {
         setOpen(false);
       }}
+      getOptionSelected={(option, value) => option.name === value.name}
       getOptionLabel={option => option.name}
       options={options}
       loading={loading}
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index b3f87c525..f7fa6cae7 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -204,6 +204,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     freeSolo = false,
     getOptionDisabled,
     getOptionLabel = x => x,
+    getOptionSelected,
     groupBy,
     id: idProp,
     includeInputInList = false,
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
index d67795e0b..310167c6c 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
@@ -90,6 +90,11 @@ export interface UseAutocompleteProps {
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    */
   getOptionLabel?: (option: any) => string;
+  /**
+   * Used to determine if an option is selected.
+   * Uses strict equality by default.
+   */
+  getOptionSelected?: (option: any, value: any) => boolean;
   /**
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index a8fd29e1a..bda4a6720 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -83,6 +83,7 @@ export default function useAutocomplete(props) {
     freeSolo = false,
     getOptionDisabled,
     getOptionLabel = x => x,
+    getOptionSelected = (option, value) => option === value,
     groupBy,
     id: idProp,
     includeInputInList = false,
@@ -239,7 +240,9 @@ export default function useAutocomplete(props) {
         options.filter(option => {
           if (
             filterSelectedOptions &&
-            (multiple ? value.indexOf(option) !== -1 : value === option)
+            (multiple ? value : [value]).some(
+              value2 => value2 !== null && getOptionSelected(option, value2),
+            )
           ) {
             return false;
           }
@@ -791,7 +794,9 @@ export default function useAutocomplete(props) {
       },
     }),
     getOptionProps: ({ index, option }) => {
-      const selected = multiple ? value.indexOf(option) !== -1 : value === option;
+      const selected = (multiple ? value : [value]).some(
+        value2 => value2 != null && getOptionSelected(option, value2),
+      );
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;

       return {

florleb · 2019-12-02T08:33:28Z

Well finally i don't use defaultValue but i use value instead and it doesnt seems to have the problem anymore.

DarkKnight1992 · 2019-12-04T11:16:33Z

Hi @oliviertassinari i opened up this issue #18499

I was going to make a pr for this but not sure if that's needs or not.

since i would need to loop through the selectedValue in renderOption

        renderOption={(option, { selected, inputValue }) => (
            <React.Fragment>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.title}
            </React.Fragment>
          )}

as long as i have value not sure adding another props getOptionSelected would help anyway.

However, if value can be return in the renderOption alongwith selected and inputValue should suffice this use case

right now, it only returning

        {renderOption(option, {
          selected: optionProps["aria-selected"],
          inputValue
        })}

adding value to the above function should give some flexibility to show the selected option

Just a thought, lemme know if that makes sense

oliviertassinari · 2019-12-04T11:42:02Z

@DarkKnight1992 We have a use case in the demo, where we fetch new options from the API each time the autocomplete popup is displayed. Without this getOptionSelected prop, we would need to alter the returned options from the API, to replace the selected options, with the reference from the value.

In your case, it wouldn't be enough. The autocomplete relies on the selected state to implement some behavior correctly, like for accessibility and keyboard navigation. If this state is wrong, you can stop right here, fixing the options display wouldn't be enough.

DarkKnight1992 · 2019-12-04T17:38:46Z

makes sense, thanks. Will send pr soon with getOptionSelected

DarkKnight1992 · 2019-12-05T08:28:07Z

Regarding the changes, I think that it could go with something in this order:

diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
index acd873074..fb9c2d4b5 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.tsx
+++ b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -59,6 +59,7 @@ export default function Asynchronous() {
       onClose={() => {
         setOpen(false);
       }}
+      getOptionSelected={(option, value) => option.name === value.name}
       getOptionLabel={option => option.name}
       options={options}
       loading={loading}
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index b3f87c525..f7fa6cae7 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -204,6 +204,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     freeSolo = false,
     getOptionDisabled,
     getOptionLabel = x => x,
+    getOptionSelected,
     groupBy,
     id: idProp,
     includeInputInList = false,
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
index d67795e0b..310167c6c 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
@@ -90,6 +90,11 @@ export interface UseAutocompleteProps {
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    */
   getOptionLabel?: (option: any) => string;
+  /**
+   * Used to determine if an option is selected.
+   * Uses strict equality by default.
+   */
+  getOptionSelected?: (option: any, value: any) => boolean;
   /**
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index a8fd29e1a..bda4a6720 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -83,6 +83,7 @@ export default function useAutocomplete(props) {
     freeSolo = false,
     getOptionDisabled,
     getOptionLabel = x => x,
+    getOptionSelected = (option, value) => option === value,
     groupBy,
     id: idProp,
     includeInputInList = false,
@@ -239,7 +240,9 @@ export default function useAutocomplete(props) {
         options.filter(option => {
           if (
             filterSelectedOptions &&
-            (multiple ? value.indexOf(option) !== -1 : value === option)
+            (multiple ? value : [value]).some(
+              value2 => value2 !== null && getOptionSelected(option, value2),
+            )
           ) {
             return false;
           }
@@ -791,7 +794,9 @@ export default function useAutocomplete(props) {
       },
     }),
     getOptionProps: ({ index, option }) => {
-      const selected = multiple ? value.indexOf(option) !== -1 : value === option;
+      const selected = (multiple ? value : [value]).some(
+        value2 => value2 != null && getOptionSelected(option, value2),
+      );
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;

       return {

the selected state is correctly thanks to these changes but now i can select the same option twice when multiple. Any suggestion having a some trouble tracking why is this happening

figured out the issue but not sure how should fix them another prop maybe ? not sure

const itemIndex = value.indexOf(item);

so selecting and deselecting also relies on reference

oliviertassinari · 2019-12-05T10:31:59Z

@DarkKnight1992 Interesting, I think that we can use an IE 11 compatible version of Array.prototype.findIndex.

DarkKnight1992 · 2019-12-05T12:17:57Z

@oliviertassinari Array.prototype.findIndex behave the same way. That's kinda makes since i am const itemIndex = value.indexOf(item); or const itemIndex = value.findIndex(v => v === item); for object equality and since object can't be equal without using reference, the rules holds up well or well atleast that's what i have known.

Lemme know if i am doing anything wrong here.

oliviertassinari · 2019-12-05T12:24:24Z

@DarkKnight1992 You can use findIndex with getOptionSelected.

DarkKnight1992 · 2019-12-05T12:28:31Z

@oliviertassinari getOptionSelected is working as expected since i am not comparing objects but a property in that option

getOptionSelected={(option, value) => {
    return option.title === value.title;
 }}

i am working on codesandox liveview, do you want to take a look into that ?

oliviertassinari · 2019-12-05T12:36:44Z

@DarkKnight1992 If you want, you can open a draft pull request, and I will have a look.

DarkKnight1992 · 2019-12-05T13:04:04Z

@oliviertassinari draft pull requested #18695

miguelbalboa · 2019-12-09T18:06:09Z

You guys are awesome!
Thanks!

Legilimens · 2019-12-16T09:12:18Z

Hi! Can i use default selected prop from string, if i use async autocomplete?
That is, I need to use string value in default, before data is loading. For example, default value could be like country name from my state manager, and use in async request if i change this autocomplete field.

oliviertassinari · 2019-12-16T09:53:16Z

@Legilimens Yes.

Legilimens · 2019-12-16T09:57:26Z

@Legilimens Yes.

Could you give an example, please? I tried to do this, but could not. I found exapmple how use default value for some option value, but i not found how i can use any string for default value

oliviertassinari · 2019-12-16T10:01:54Z

I can't here, please ask on StackOverflow.

JuanmaMenendez · 2020-03-13T16:59:01Z

For the same reasons, this property (getOptionSelected) should be added to the <Select> component.

What do you think @DarkKnight1992 ?

DarkKnight1992 · 2020-03-14T05:59:32Z

@JuanmaMenendez select already works if you provide a primitive value

JuanmaMenendez · 2020-03-14T11:33:40Z

Yes but I need to provide and select an object, not a primitive value.

DarkKnight1992 · 2020-03-14T12:18:16Z

@oliviertassinari is that's possible ?

oliviertassinari · 2020-03-15T00:17:13Z

@DarkKnight1992 It's supported but discouraged with the non-native select. It's not supported by the native select.

JuanmaMenendez · 2020-03-15T21:57:22Z

@oliviertassinari thanks for your answer, can you please give us a link about the use of getOptionSelected in a Select component, I don't see anything in the docs https://material-ui.com/api/select/

zeljkocurcic · 2020-03-31T12:08:59Z

I have a warning when using this prop, not sure if there's anything I can do about it:

Warning: React does not recognize the `getOptionSelected` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `getoptionselected` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef(Autocomplete))
    in ForwardRef(Autocomplete) (created by WithStyles(ForwardRef(Autocomplete)))
    in WithStyles(ForwardRef(Autocomplete)) (created by Field)

oliviertassinari · 2020-03-31T13:51:57Z

@zeljkocurcic Upgrade to the latest version.

aakers · 2020-11-29T15:40:39Z

@zeljkocurcic Upgrade to the latest version.

Latest version of what? I have the latest version of Autocomplete that I see published and the newest versions of React and React DOM.

nikobojs · 2021-07-22T15:04:35Z

I get the same warning using

    "@material-ui/core": "5.0.0-beta.1",
    "@material-ui/lab": "5.0.0-alpha.40",

Also, i can import Autocomplete from both lab and core. I don't know if this is on purpose?

oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Nov 18, 2019

oliviertassinari added the new feature New feature or request label Nov 19, 2019

oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Nov 19, 2019

This was referenced Nov 22, 2019

Autocomplete defaultvalue and value for options with checkbox only works if options reference is passed #18499

Closed

[Autocomplete] Document value equality check #18516

Merged

oliviertassinari mentioned this issue Nov 24, 2019

[Autocomplete] Warn when value and option doesn't match #18514

Closed

oliviertassinari changed the title ~~[AutoComplete] expose getOptionSelected prop~~ [Autocomplete] Add getOptionSelected prop Nov 27, 2019

DarkKnight1992 mentioned this issue Dec 5, 2019

[Autocomplete] Add getOptionSelected prop #18695

Merged

1 task

oliviertassinari assigned DarkKnight1992 Dec 5, 2019

oliviertassinari closed this as completed in #18695 Dec 5, 2019

guiihlopes mentioned this issue Feb 5, 2020

[Autocomplete] Support defaultValue when using asynchronous feature #19565

Closed

1 task

doflo-dfa mentioned this issue Dec 8, 2021

@guimex22 The value needs to be referentially equal to the option to consider it selected. We have #18443 to customize this. #30111

Closed

[Autocomplete] Add getOptionSelected prop #18443

[Autocomplete] Add getOptionSelected prop #18443

Comments

miguelbalboa commented Nov 18, 2019

Summary 💡

Examples 🌈

Motivation 🔦

oliviertassinari commented Nov 18, 2019

oliviertassinari commented Nov 18, 2019

miguelbalboa commented Nov 18, 2019 • edited Loading

oliviertassinari commented Nov 19, 2019

miguelbalboa commented Nov 19, 2019

rovnyart commented Nov 22, 2019

oliviertassinari commented Nov 24, 2019

florleb commented Nov 27, 2019

oliviertassinari commented Nov 27, 2019

florleb commented Nov 27, 2019

SandraMarcelaHerreraArriaga commented Nov 29, 2019 • edited Loading

oliviertassinari commented Nov 30, 2019

florleb commented Dec 2, 2019

DarkKnight1992 commented Dec 4, 2019 • edited Loading

oliviertassinari commented Dec 4, 2019 • edited Loading

DarkKnight1992 commented Dec 4, 2019 • edited Loading

DarkKnight1992 commented Dec 5, 2019 • edited Loading

oliviertassinari commented Dec 5, 2019 • edited Loading

DarkKnight1992 commented Dec 5, 2019 • edited Loading

oliviertassinari commented Dec 5, 2019

DarkKnight1992 commented Dec 5, 2019

oliviertassinari commented Dec 5, 2019

DarkKnight1992 commented Dec 5, 2019 • edited Loading

miguelbalboa commented Dec 9, 2019

Legilimens commented Dec 16, 2019

oliviertassinari commented Dec 16, 2019

Legilimens commented Dec 16, 2019

oliviertassinari commented Dec 16, 2019

JuanmaMenendez commented Mar 13, 2020

DarkKnight1992 commented Mar 14, 2020 • edited Loading

JuanmaMenendez commented Mar 14, 2020

DarkKnight1992 commented Mar 14, 2020

oliviertassinari commented Mar 15, 2020 • edited Loading

JuanmaMenendez commented Mar 15, 2020

zeljkocurcic commented Mar 31, 2020

oliviertassinari commented Mar 31, 2020

aakers commented Nov 29, 2020

nikobojs commented Jul 22, 2021

miguelbalboa commented Nov 18, 2019 •

edited

Loading

SandraMarcelaHerreraArriaga commented Nov 29, 2019 •

edited

Loading

DarkKnight1992 commented Dec 4, 2019 •

edited

Loading

oliviertassinari commented Dec 4, 2019 •

edited

Loading

DarkKnight1992 commented Dec 4, 2019 •

edited

Loading

DarkKnight1992 commented Dec 5, 2019 •

edited

Loading

oliviertassinari commented Dec 5, 2019 •

edited

Loading

DarkKnight1992 commented Dec 5, 2019 •

edited

Loading

DarkKnight1992 commented Dec 5, 2019 •

edited

Loading

DarkKnight1992 commented Mar 14, 2020 •

edited

Loading

oliviertassinari commented Mar 15, 2020 •

edited

Loading