[CPT-1480] Prevent multiple Select from closing when search was clicked

[toptalwadiibasmi]

CPT-1480

Description

The select input gains focus after clicking on a menu item only when the select is not multiple. This prevents it from closing on multiple selections when the user clicks/focuses on the search input.

How to test

• Temploy

Select (multiple)

• Open the Picasso Select
• Go to Limit section.
• Click on the search input.
• Then click on any option.
• The search options should remain visible.

Select (single)

• Open the Picasso Select
• Go to Limit section.
• Enter anything or click on the search
• Click on any field.
• The search options should close.

Development checks

• Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• n/a Annotate all props in component with documentation
• n/a Create examples for component
• Ensure that deployed demo has expected results and good examples
• n/a Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: d9d5ab4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@toptal/picasso	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[toptal-devbot]

Greetings from FX team, @toptalwadiibasmi 👋

Thank you so much for contributing 🙇

We have got high priority ticket generated on our Kanban board so we will do our best to make your experience supreme!

What's next? We will collaborate using this workflow. For you this practically means making sure DONE criteria is met and responding promptly to code review comments 😉

🙏 please, help us improve, rate your contributing experience after merge

[toptalwadiibasmi]

@toptal-anvil ping reviewers

[sashuk]

@toptalwadiibasmi Thank you for contribution! Can you please double-check with @whymancreates if this is a correct behaviour for Select component in #-base-core? The change does seem logical, basically we have the same behavior for multiple options select independently if the search is activated

(from pull request checks) Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core

[sashuk]

@toptalwadiibasmi For example, it is not clear if we should leave the search term in input after clicking on one of the search results – right now the input is reset, not sure if this behavior is okay from point of view of Design Team

Recording from pull request temploy

Kapture.2024-01-17.at.11.11.35.mp4

[toptalwadiibasmi]

@toptalwadiibasmi For example, it is not clear if we should leave the search term in input after clicking on one of the search results – right now the input is reset, not sure if this behavior is okay from point of view of Design Team

Recording from pull request temploy

Kapture.2024-01-17.at.11.11.35.mp4

@whymancreates What do you think of this behavior? The current implementation resets the search upon choosing an item. Should we retain the search term or keep it?

[rasitozcan]

@sashuk & @toptalwadiibasmi, me and @whymancreates had chance to review the tickets in terms of BASE compatibility (when the ticket was first created). And we have agreed on they are acceptable.

[sashuk]

Thank you @rasitozcan!

@toptalwadiibasmi Can you please finish the pull request description?

[whymancreates]

@toptalwadiibasmi For example, it is not clear if we should leave the search term in input after clicking on one of the search results – right now the input is reset, not sure if this behavior is okay from point of view of Design Team
Recording from pull request temploy
Kapture.2024-01-17.at.11.11.35.mp4

@whymancreates What do you think of this behavior? The current implementation resets the search upon choosing an item. Should we retain the search term or keep it?

In a multiselect I agree to retain the search term in the input box and keep the result list even after selection.

[sashuk]

Code looks good, works as expected, tests were adjusted

Error in Jest tests https://github.com/toptal/picasso/actions/runs/7544801668/job/20538958946?pr=4101#step:15:328 should be easy to fix

[toptalwadiibasmi]

@toptal-anvil ping reviewers

[toptalwadiibasmi]

• Search is no longer reset after selecting an option when the select is multiple.
• I fixed the failing jest test.

[toptalwadiibasmi]

Should I take any action to get the Happo's check successful?

[sashuk]

@toptalwadiibasmi Visual test is not related, I've rebased the pull request to rerun the test

[toptalwadiibasmi]

@toptal-bot run package:alpha-release

[toptalwadiibasmi]

I am unable to run the package:alpha-release due to the error in the check. Pard my ignorance as this is one of my first time having contribution, can someone help?

[sashuk]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@53.0.1-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.60+abc9238aa
yarn add @toptal/picasso@42.3.7-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.4+abc9238aa
yarn add @toptal/picasso-charts@56.0.3-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.4+abc9238aa
yarn add @toptal/picasso-codemod@5.6.4-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.110+abc9238aa
yarn add @toptal/picasso-forms@66.1.4-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.4+abc9238aa
yarn add @toptal/picasso-pictograms@2.0.1-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.180+abc9238aa
yarn add @toptal/picasso-provider@3.4.4-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.11+abc9238aa
yarn add @toptal/picasso-query-builder@1.4.2-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.13+abc9238aa
yarn add @toptal/picasso-rich-text-editor@10.0.1-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.60+abc9238aa
yarn add @toptal/picasso-shared@13.1.4-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.11+abc9238aa
yarn add @toptal/picasso-tailwind@1.0.2-alpha-CPT-1480-fe-keep-picasso-select-dropdown-open-when-a-selection-is-made-in-search-mode-abc9238aa.40+abc9238aa

[sashuk]

@toptalwadiibasmi There was caching issue, packages are generated now 👍

[toptalwadiibasmi]

Thanks @sashuk !

[toptalwadiibasmi]

@toptal-anvil ping reviewers