primefaces / primefaces/primereact
AutoComplete forceSelection when providing a selectedItemTemplate
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
I am using the AutoComplete component, I have forceSelection enabled and I provide a selectedItemTemplate.
The AutoComplete component does not clear the value when I click away and the value is not in the suggestions list.
If I drop the selectedItemTemplate and add the field property then it works fine, but I need a template for the selected item, because I am concatenating certain properties for display purposes.
Expected behaviour:
When clicking away from the component, clear the value when it is not in the suggestions list
Actual behaviour:
When clicking away from the component does not clear the value when it is not in the suggestions list
Reproducer
https://stackblitz.com/edit/vitejs-vite-7c9yqym5?file=src%2FApp.tsx
System Information
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
Memory: 10.68 GB / 31.73 GB
Binaries:
Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
npm: 11.6.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (140.0.3485.81)
Internet Explorer: 11.0.26100.1882
npmPackages:
@types/node: ^24.1.0 => 24.1.0
@types/react: ^19.1.8 => 19.1.8
@types/react-dom: ^19.1.6 => 19.1.6
@vitejs/plugin-react: ^4.7.0 => 4.7.0
exceljs: ^4.4.0 => 4.4.0
nanoid: ^5.1.5 => 5.1.5
primeflex: ^4.0.0 => 4.0.0
primeicons: ^7.0 => 7.0.0
primereact: ^10.9.6 => 10.9.7
react: ^19.1.1 => 19.1.1
react-dom: ^19.1.1 => 19.1.1
react-hotkeys-hook: ^5.1.0 => 5.1.0
react-idle-timer: ^5.7.2 => 5.7.2
react-router: ^7.7.1 => 7.7.1
sass: ^1.89.2 => 1.89.2
typescript: ^5.8.3 => 5.8.3
uuid: ^11.1.0 => 11.1.0
vite: ^7.0.6 => 7.0.6
vite-plugin-dts: ^4.5.4 => 4.5.4
vite-plugin-remove-console: ^2.2 => 2.2.0
vite-plugin-static-copy: ^3.1.1 => 3.1.1
zustand: ^5.0.6 => 5.0.6
Steps to reproduce the behavior
Click on the autocomplete field
Type 't' to get a list of suggestions
Click away from the field
Expected behavior
When clicking away from the field after typing 't' the field should clear the state, because 't' is not a valid option in the suggestions, the user should be forced to select an option 'forceSelection'
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the StackBlitz reproducer at src/App.tsx and run the AutoComplete scenario with forceSelection and selectedItemTemplate. Trace the component's blur handling for this template path; done means clicking away after typing a value that is not suggested clears the field, while selecting a valid option still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100