primefaces / primefaces/primereact

Autocomplete: disabled option issue

Open
#4,032 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Discussion Type: Enhancement
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

Hi, i want to report an un-wanted result of PrimeReact's autocomplete: ( https://primereact.org/autocomplete/ ) (version 9.0.0 beta.1)

PS: i previously reported an issue here about disabled options doesn't work in PrimeReact's autocomplete: https://github.com/primefaces/primereact/issues/3953

My issue with disabled option after selection in autocomplete.
Whenever i select an option, autocomplete will construct (add) this item:
disabled: true

to the object that i selected to be disabled.
Codesandbox: https://codesandbox.io/s/primereact-autocomplete-disabled-option-xkgmks

Now this is struggling, because if you want to send back the selected object to backend, it will cause an error because backend doesn't reorganise this new item (disabled), so now you need to write more code to remove it. Which isn't pratical solution.

Let me now show you a perfect solution for this here using MUI-5 : https://codesandbox.io/s/material-ui-autocomplete-with-disabled-option-at-selection-forked-zurbih
Notice that MUI autocomplete doesn't add anything to the selected option (check console.log), a clean object.

Please optimise autocomplete component. Thank you.

Reproducer

https://codesandbox.io/s/primereact-autocomplete-disabled-option-xkgmks

PrimeReact version

9.0.0 beta.1

React version

17.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 90

Steps to reproduce the behavior

No response

Expected behavior

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproducer and the PrimeReact AutoComplete component entry point. Trace where the selected option receives the disabled property, then verify that selecting an option preserves the original object without adding that property. Confirm the behavior against the provided reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.