Story 1.0.12.1. CRM. Filter component. Select with autosuggest

Content

General info

This user story focuses on implementing a filter component with an autosuggest feature in the CRM. The filter will allow users to search for specific titles dynamically by typing partial keywords, which will prompt the system to suggest matching titles. The feature should enhance user experience by allowing quick selection, filtering, and clearing of search terms. Additionally, users should be able to apply the filter by pressing "Enter" and cancel by pressing "Esc."

User story

As a CRM user,
I want to be able to filter results by dynamically searching titles using an autosuggest feature,
So that I can easily locate specific roles or positions without scrolling through a long list.

Visual design:

https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/ROCKEN-jobs-%2F-talent?node-id=57364-40187&t=vx0POzVgTznhpOQ8-4

#

Acceptance Criteria

01

Scenario: Filter panel with autosuggest is displayed
Given the user is on the CRM filter panel
When the user selects the "Title" filter field
Then an input field is shown, allowing the user to type and activate the autosuggest feature.

02

Scenario: Typing to activate autosuggest
Given the "Title" filter field is active
When the user types a partial term (e.g., "pro")
Then a list of matching titles (such as Product Designer, Project Manager, Provider) appears as suggestions.

image-20241107-070121.png

03

Scenario: Selecting a suggestion
Given a list of suggestions is displayed
When the user clicks on one suggestion (e.g., Product Designer) or several
AND click “Apply“ button
Then the suggestion (or several) is shown as a tag above the select field, and the input clears.

image-20241107-071438.png

04

Scenario: Applying custom entries not in the suggestion list
Given the user types a title not appearing in the autosuggest list (e.g., "ABC123")
When the user presses "Enter"
Then the entered title is accepted as a tag and applied to the filter criteria.

05

Scenario: Clearing selected filters
Given one or more tags are in the "Title" field
When the user clicks the "Clear" button
Then all tags are removed, resetting the filter to display all titles in the results.

06

Scenario: Cancelling the filter selection
Given the autosuggest dropdown is open
When the user clicks the "Cancel" button
Then the dropdown closes, and no changes are applied to the filter selection.

07

Scenario: Cancelling the filter selection using "Esc"
Given the autosuggest dropdown is open
When the user presses the "Esc" on the keyboard
Then the dropdown closes, and no changes are applied to the filter selection.

08

Scenario: Reset single filter
Given one or more tags are selected
When the user hover on the tag
AND clicks on the "x"
Then filter by this tag is removed and page reflect on this change immediatelly

image-20241114-073628.png

09

Scenario: appear cross icon during typing
Given select field
When user type at least one symbol
Then clear icon “x“ is appeared in the field

image-20241114-074023.png

10

Scenario: Clear entered text in the field
Given some text is typed in the select field
When the user clicks on the "x"
Then text in the field is removed

image-20241114-074023.png

Comments

Leave a Reply