[Bug]: SelectSearch autocomplete

[hikinine]

Tremor Version

3.16.2

Link to minimal reproduction

minimal example below

Steps to reproduce

import { SearchSelect, SearchSelectItem } from '@tremor/react'

export default function App() {
  return (
    <SearchSelect id="fruits">
      <SearchSelectItem value="apple">Apple</SearchSelectItem>
      <SearchSelectItem value="orange">Orange</SearchSelectItem>
      <SearchSelectItem value="banana">Banana</SearchSelectItem>
      <SearchSelectItem value="grape">Grape</SearchSelectItem> 
    </SearchSelect>
  )

What is expected?

Expose autocomplete props on SearchSelect OR some way to interact with the input search

What is actually happening?

I understand that this behavior concerns the browser I use (which is Google Chrome), however, I was supposed to be able to ask the browser to turn off suggestions in a specific input.

Normally I would use
autocomplete="off" but API is not exposed to interact with the select input search

What browsers are you seeing the problem on?

Chrome

Any additional comments?

No response

[kris08052000]

Hi,

I don't think like so any enhancement is required on this one. Because, for the above code you you have given, If you type 2 letters and press on "Tab" button, it is auto completing.

Example: type "Or" and press "Tab" button it is auto completed to "Orange"

Thanks

[hikinine]

I'm not complaining about the operation of the select component, I know that the tab button accessibility exists and works great.

What I need is to disable the BROWSER's auto-complete (suggestions), which with the current component, is not possible.

How I do that?

<input type="text" autocomplete="off" />

What is the matter?

SearchSelect component has no "autocomplete" prop to reflect on internal input

[kris08052000]

Hi,

This auto suggestions is not something happening for me. When I run the code which you pasted here 4days ago. I didn't find any such auto suggestions in my chrome or system.

Means this is not everyone's problem.

I would suggest you run your code on Microsoft edge or Brave browser for testing and check for that auto suggestion.

Check in your chrome browser any extension about auto complete is installed or enabled. Try to remove it.

Also check in browser setting for the about suggestions or anything related to it.

Google it or chatgpt about removing auto complete in browser removal.

Thanks

[hikinine]

I would suggest you run your code on Microsoft edge or Brave browser for testing and check for that auto suggestion.

Check in your chrome browser any extension about auto complete is installed or enabled. Try to remove it.

Also check in browser setting for the about suggestions or anything related to it.

Google it or chatgpt about removing auto complete in browser removal.

That is just stupid... i am not asking how to remove the feature from my browser (which is great for many purposes). Im trying to solve an UX problem (which does not affect me, but everyone who use an webapp made with tremor SelectSearch)

I think you misunderstanding (again).
It is obvious that the behavior in my browser will be different from the behavior in your browser.

DOES NOT MATTER

As you may know, native html input has an attribute named autocomplete (which enable browsers to suggest or not)
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete

I am asking for some props that expose autocomplete attribute from NATIVE INPUT, not tremor component.

SUMMARY

SelectSearch has an input element.
That input element (which we cant interact with current api) by default enable NATIVE AUTO COMPLETE.
Inputs should enable by default? YES.
Select should enable by default? NO.

WHY IT SHOULD NOT?

Browsers tries to understand what is that input about, and suggest based on cached results, etc.
Whatever, that predict won't select the item or change it internal states leading alot of bad UX.

HOW TO SOLVE IT?

Just expose input ref from SelectSearch. Maybe turn autocomplete=off by default.

Your answer has not to do with the actual problem, but thanks for reply

[severinlandolt]

Agreed, there should not be any autocomplete. Will remove it in v3.17

[severinlandolt]

@hikinine Please test npm i @tremor/[email protected]

[hikinine]

thank you very much

[github-actions]

🎉 This issue has been resolved in version 3.17.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀