How to disable one of the list item in PrimeReact ListBox?

Question

For the PrimeReact ListBox implementation:

const cities = [
    {name: 'New York', code: 'NY'},
    {name: 'Rome', code: 'RM'},
    {name: 'London', code: 'LDN'},
    {name: 'Istanbul', code: 'IST'},
    {name: 'Paris', code: 'PRS'}
];

<ListBox 
  optionLabel="name" 
  optionValue="code" 
  value={city} 
  options={cities} 
  onChange={(e) => setCity(e.value)} 
/>

I get the proper panel with the list items. But How do I disable a list item, say if New York needs to be disabled from getting selected, how can it be achieved?

Mario Petrovic · Accepted Answer · 2021-03-19T16:53:48.950

1

Solution is to either pass name of the property to match disabled state to of the option like this:

const cities = [
  { name: 'New York', code: 'NY', disabled: true },
  { name: 'Rome', code: 'RM' },
  { name: 'London', code: 'LDN' },
  { name: 'Istanbul', code: 'IST' },
  { name: 'Paris', code: 'PRS' },
];

<ListBox
  optionLabel="name"
  optionValue="code"
  value={city}
  options={cities}
  optionDisabled="disabled"
  onChange={(e) => setCity(e.value)}
/>

Or a function that will decide which one is disabled, where option is one item in the list while list is being iterated

const cities = [
  { name: 'New York', code: 'NY' },
  { name: 'Rome', code: 'RM' },
  { name: 'London', code: 'LDN' },
  { name: 'Istanbul', code: 'IST' },
  { name: 'Paris', code: 'PRS' },
];

<ListBox
  optionLabel="name"
  optionValue="code"
  value={city}
  options={cities}
  optionDisabled={(option) => option.name === 'New York"}
  onChange={(e) => setCity(e.value)}
/>

edited Mar 19 '21 at 16:53

answered Mar 19 '21 at 16:16

Mario Petrovic

7,500
14
42
62

I tried `optionDisabled={true}` to verify. Seems like it doesn't work. All the values were expected to be Disabled. But it is not. – Harihara_K Mar 19 '21 at 16:25
It does not work like that. Value in `optionDisabled={}` needs to be the same as one of the options' `name` value. In your case 'New York'. Try putting it like that `optionDisabled="New York"` and your first option should be disabled. If you want to disable the whole component you can use `disabled={true}` prop – Mario Petrovic Mar 19 '21 at 16:27
Oh okay. But, `optionDisabled={(option) =>true}` should disable all items right? – Harihara_K Mar 19 '21 at 16:29
Although I need only one item in the list to be disabled, I'm trying `optionDisabled={(option) =>true}` just to verify. Because `optionDisabled={(option) => option.disabled}` didnot work. – Harihara_K Mar 19 '21 at 16:35
Yes i am also seeing that to be the case. I am looking for a solution. But this is such a trivial feature :) – Mario Petrovic Mar 19 '21 at 16:41
Yeah ;) . Thanks for your time – Harihara_K Mar 19 '21 at 16:43
@Harihara_K I found the solution. I will edit my post – Mario Petrovic Mar 19 '21 at 16:52
I mean, its not different than the previous the one that you mentioned that `option => true` should disable all. And it worked for me. Try it out in sandbox https://codesandbox.io/s/x8n7x?file=/src/demo/ListBoxDemo.js:3116-3130 – Mario Petrovic Mar 19 '21 at 16:58

How to disable one of the list item in PrimeReact ListBox?

1 Answers1