primefaces / primefaces/primereact

AutoComplete forceSelection when providing a selectedItemTemplate

Open
#8,309 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.