CODEWITHSUNDEEP
reactjsprimereact
Darkpsinight_2
Darkpsinight_2

Reputation: 1151

PrimeReact Autocomplete - Disable option after selection

How to disable the selected option in the list of options in autocomplete PrimeReact?

For example, after selecting an option "Afghanistan", it should be disabled right away.

example

CodeSandbox:

Edit awesome-shockley-n201lg

Code Sample:

export const AutoCompleteDemo = () => {
//...

  const searchCountry = (event) => {
    setTimeout(() => {
      let _filteredCountries;
      if (!event.query.trim().length) {
        _filteredCountries = [...countries];
      } else {
        _filteredCountries = countries.filter((country) => {
          return country.name
            .toLowerCase()
            .startsWith(event.query.toLowerCase());
        });
      }

      setFilteredCountries(_filteredCountries);
    }, 250);
  };

  const itemTemplate = (item) => {
    return (
      <div className="country-item">
        <div>{item.name}</div>
      </div>
    );
  };

  return (
    <div className="card">
      <AutoComplete
        value={selectedCountry2}
        suggestions={filteredCountries}
        completeMethod={searchCountry}
        field="name"
        dropdown
        forceSelection
        itemTemplate={itemTemplate}
        onChange={(e) => setSelectedCountry2(e.value)}
        aria-label="Countries"
      />
    </div>
  );
};

Upvotes: 1

Views: 619

Answers (2)

Gabriell Reis
Gabriell Reis

Reputation: 61

It worked for me with the onSelect and onUnselect props. Here the example:

<AutoComplete
  name="name"
  field="name"
  completeMethod={search}
  value={selectedCountries} 
  suggestions={filteredCountries} 
  onSelect={(e) => e.value.disabled = true}
  onUnselect={(e) => e.value.disabled = false}
  onChange={(e) => {
    setSelectedCountries(e.value)
  }}
  multiple
/>

Upvotes: 0

Melloware
Melloware

Reputation: 12029

This has been deployed in PrimeReact 9.0.0-beta1 that is now in NPM.

Here is a working Code Sandbox:https://codesandbox.io/s/lingering-darkness-vyhp33

const onChange = (e) => {
    e.value.disabled = true;
    setSelectedCountry2(e.value);
};

Upvotes: 2

Related Questions