Adding search feature to Select Component

[batuhantozun]

Figma

We need to add searchable feature to our select component. Details will be here...

[leventozen]

Search Feature in Select Component Design Meeting Report

Date: 26.10.2022 15:30 (UTC+3)

• We don't need to a have a Search component for this feature.
• We'll need an enhancement on the input component to have a "search input" version (with a search icon at left and clear icon at right to clear search inputs.)
• Search input will be sticky.
• When select opened, search input will be focused.
• When user type, previously selected items won't shown. Otherwise, selected items are shown at the top.

Design work will start according to those decisions then implementation will be planned.

[pyilmazer]

Implementation details question : Will there be any count limit to separate in memory items flow from server side processing flow? This behaviour may be determined with a prop. Ex: Apply in memory items flow when item count is less than 100.

[batuhantozun]

We need to decide some details according to our update meeting. Here is the details;

• Adding loading state to input component
• Adding no data status to search results
• Can we move search icon to right of input component?

@buseselvi FYI

[musaakkayaa]

Design

Figma

Implementation

General usage example:

<bl-select search-bar search-bar-placeholder="Search Country">
    <bl-select-option value="tr">Turkey</bl-select-option>
    <bl-select-option value="nl">Netherlands</bl-select-option>
</bl-select>

Rules

API Reference:

bl-select component

Description

Attributes

Attribute	Description	Default Value
label (string)	Sets the label value (optional)	-
placeholder(string)	Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder. (optional)	-
size(string)	Sets the size value. Select component's height value will be changed accordingly (large, medium, small)	medium
required (boolean)	When option is not selected, shows component in error state	false
disabled (boolean)	Shows the component in disabled state	false
multiple (boolean)	Allows multiple options to be selected	false
label-fixed (boolean)	Makes label as fixed positioned	false
help-text (string)	Adds help text(optional)	-
invalid-text (string)	Set custom error message(optional)	-
search-bar (boolean)	Show search text for options(optional)	-
search-bar-placeholder (string)	Search text placeholder(optional)	-
search-not-found-text (string)	When options not found, shown this text	Not Found
search-bar-loading-state (boolean)	Search bar loading state for fetch request	false
search-filterable (boolean)	Search in the option list	true

Slots

Name	Description	Default Content
default slot	Content inside select	-
search-not-found slot	Custom show search not found layout	-

Events

Event	Description
bl-select	Will be triggered when click option
bl-search	Will be triggered every time search bar key down

[muratcorlu]

In this issue we can focus search feature only. So you can remove unchanged attributes/events from the ADR.

I would like to read some information about how search will work in some different use-cases. Can we add some code examples to the ADR?

• Will it work with a static of list in the dom?
• Will user able to do a search on server-side with this functionality? If so, how?
• We accept so much text attributes to customize messages. I think this will cause so much code repetition and crowd in case you just want to use select in a different language then English. Maybe we should consider this feature together with our localization task

Let's have a conclusion here first then continue implementation. That will be easier, I think.

We can also arrange a meeting if it's needed.

[muratcorlu]

Design Meeting Report

Date: 2023-04-18 14:00 GMT+3

---

We had another discussion about this while talking about "Select All" feature (#520) Here are the search related decisions:

• Search functionality will be optional in contrast to "Select All".
• Search field will be sticky inside the popover.
• Popover height will still include up to 6 items even if the search field is visible. That means popover height in search mode will be able to bigger than single select mode.

[muratcorlu]

Our UX Research started on this together with #520. Results will come soon.

[buseselvi]

Here is the final design documentation link 🚀

[erbilnas]

Searchable Select (ADR)

Our aim is to add a simple search bar for our bl-select component. (Figma)

Status

Proposed

Decision

• Upon selecting the component, the search bar should automatically receive focus, allowing users to input their text. The search icon must definitely be shown. An event should be triggered for each keystroke.

• When the user navigates away from the select, the selected items should be displayed in the select as per the usual behavior.

• Notably, the selected options within the list will be prominently featured at the top.

Rationale

<bl-select search-bar search-bar-placeholder="Search Country" search-bar-loading-state="false">
    <bl-select-option value="tr">Turkey</bl-select-option>
    <bl-select-option value="nl">Netherlands</bl-select-option>

    <div slot="search-not-found">
      <img src="https://cdn.trendyol.com/not-found-image" width="80" height="80"/>

      <span class="no-result">No Result</span>
    </div>
</bl-select>

Attribute	Description	Default Value	Type
search-bar	Enable search functionality for the options within the list.	false	Boolean
search-bar-placeholder	Search for text variations such as "search," "searching," "search by country," and so on.	' '	String
search-bar-loading-state	Display a loading icon in place of the search icon.	false	Boolean

Slots	Description
search-not-found	Display a developer-defined container when the search yields no results.

Events	Description
bl-search	Trigger an event for each keystroke.

Consequences

Let's discuss this either under this comment or during our weekly meetings.

[AykutSarac]

Good job! Can you share your recommended solution to swap between the current behaviour of displaying selected options and the transformation after clicking to search among options? (like what's rendered before and after etc.)

Additionally, I suggest avoiding the use of localized terms within components. Instead, consider employing slots to enable users to display their personalized messages. As we may introduce our own localization data in the future, the ability for developers to pass props might be deprecated. Therefore, utilizing slots provides flexibility for developers to render the content they prefer.

[erbilnas]

Yes, I agree with you on that matter. Regarding our localization considerations, I believe the 'search-not-found' slot addresses it. However, for the placeholder, I think we can't resolve that using a slot since it needs to be within the input.

[leventozen]

Let's get a comment from @buseselvi about it. I personally preferring not to use a slot to have generic displaying. However, I think we can give a little bit flexibility after we successfully apply our decisions on that matter.

[erbilnas]

Searchable Select (ADR)

Our aim is to add a simple search bar for our bl-select component. (Figma)

Status

Accepted

Decision

• Upon selecting the component, the search bar should automatically receive focus, allowing users to input their text. The search icon must definitely be shown. An event should be triggered for each keystroke.

• When the user navigates away from the select, the selected items should be displayed in the select as per the usual behavior.

• Notably, the selected options within the list will be prominently featured at the top.

• If the users are unable to find any results at the end of their search, display a 'not found' message along with a clear search button.

Rationale

<bl-select search-bar search-bar-placeholder="Search Country" search-bar-loading-state="false">
    <bl-select-option value="tr">Turkey</bl-select-option>
    <bl-select-option value="nl">Netherlands</bl-select-option>
</bl-select>

Attribute	Description	Default Value	Type
search-bar	Enable search functionality for the options within the list.	false	Boolean
search-bar-placeholder	Search for text variations such as "search," "searching," "search by country," and so on.	' '	String
search-bar-loading-state	Display a loading icon in place of the search icon.	false	Boolean
search-not-found-text	Searched option not found text variations such as "No result found", "No data found" and so on.	' '	String
popover-clear-search-text	Text variations of clear search button in popover such as "Clear search", "Reset search" and so on.	' '	String

Events	Description
bl-search	Trigger an event for each keystroke.

Consequences

I have concerns regarding the default text for the clear search button, as it needs to be available in either Turkish or English. How should we address this? Having an empty button text could appear awkward and we need to ensure there is a default text for the button.

[buseselvi]

Hello, we agreed not to use slots here 🚀

Also, I did a little research about the clear selected items and clear search we discussed. I couldn't find an example with clear search (for multiple select). So, let's not add a clear icon button to delete the text written in search and leave the clear button as it is (removing selected items). We can keep showing search icon while typing like in the design, but we can still show "Clear Search" button when there is "No Data Found". 🙏🏻 @erbilnas

[github-actions[bot]]

:tada: This issue has been resolved in version 2.4.0-beta.7 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 3.0.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: