[FX-5837] Disable autocomplete in tag selector

[sashuk]

FX-5837

Description

This pull request does two closely related things:

• fixes bug with thin popper container appearing when there are no options and no "empty options" text in Autocomplete. Use the code below to observe it in https://picasso.toptal.net/

Reproduction code

import React, { useState } from 'react'
import type { AutocompleteItem } from '@toptal/picasso'
import { Autocomplete, Form } from '@toptal/picasso'
import { isSubstring } from '@toptal/picasso-utils'

const Example = () => {
  const [value, setValue] = useState('')
  const [options, setOptions] = useState<AutocompleteItem[] | null>([])

  return (
    <div>
      <Form autoComplete='off'>
        <Autocomplete
          placeholder='Start typing country...'
          value={value}
          options={[]}
          noOptionsText={null}
          onChange={newValue => {
            console.log('onChange returns just item value:', newValue)

            setOptions(filterOptions(newValue))
            setValue(newValue)
          }}
          data-testid='autocomplete'
        />
      </Form>
    </div>
  )
}

export default Example

• adds support for non-dropdown option submission in TagSelector component (it heavily relies on Autocomplete) via submitOtherOptionOnEnter prop. To achieve the behavior from the original thread, consumers need to specify certain combination of other properties (dedicated story was added).

How to test

• Check Other option submission on Enter story at temploy
• Client Portal tests in https://github.com/toptal/client-portal/pull/9733 are fine

Screenshots

Kapture.2024-09-09.at.12.47.12.mp4

Development checks

• Add changeset according to guidelines (if needed)
• [N/A] Double check if picasso-tailwind-merge requires major update (check its README.md)
• 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
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• 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)

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

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

This PR includes changesets to release 6 packages

Name	Type
@toptal/picasso-autocomplete	Patch
@toptal/picasso-tagselector	Minor
@toptal/picasso-forms	Patch
@toptal/picasso	Patch
@toptal/picasso-page	Patch
@toptal/picasso-query-builder	Patch

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

[sashuk]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.3-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/base-tailwind@0.0.3-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.74+d506eff5b
yarn add @toptal/picasso@50.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.6+d506eff5b
yarn add @toptal/picasso-accordion@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-account-select@3.0.3-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.23+d506eff5b
yarn add @toptal/picasso-alert@3.0.13-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-amount@1.0.8-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-application-update-notification@2.0.13-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-autocomplete@4.0.4-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-avatar@6.1.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.23+d506eff5b
yarn add @toptal/picasso-avatar-upload@3.0.4-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-backdrop@1.0.6-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.115+d506eff5b
yarn add @toptal/picasso-badge@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-breadcrumbs@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-button@4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-calendar@4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-carousel@4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-charts@59.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.86+d506eff5b
yarn add @toptal/picasso-checkbox@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-codemod@6.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.237+d506eff5b
yarn add @toptal/picasso-collapse@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-container@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-date-picker@2.0.17-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-date-select@1.0.49-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-drawer@3.0.13-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-dropdown@4.1.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-dropzone@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-empty-state@2.0.4-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-fade@1.0.6-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.115+d506eff5b
yarn add @toptal/picasso-file-input@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-form@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-forms@72.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.6+d506eff5b
yarn add @toptal/picasso-grid@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-helpbox@5.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-icons@1.6.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.101+d506eff5b
yarn add @toptal/picasso-image@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-input@3.0.15-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-input-adornment@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-link@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-list@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.6+d506eff5b
yarn add @toptal/picasso-loader@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-logo@2.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.26+d506eff5b
yarn add @toptal/picasso-menu@3.0.3-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.23+d506eff5b
yarn add @toptal/picasso-modal@3.0.13-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-modal-context@1.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.296+d506eff5b
yarn add @toptal/picasso-note@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-notification@4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-number-input@3.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-outlined-input@3.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-overview-block@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-page@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-pagination@4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-paper@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-password-input@4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-pictograms@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-popper@1.0.4-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.194+d506eff5b
yarn add @toptal/picasso-prompt-modal@2.0.13-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-provider@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.115+d506eff5b
yarn add @toptal/picasso-query-builder@7.2.7-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.6+d506eff5b
yarn add @toptal/picasso-quote@2.0.3-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-radio@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-rating@3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.19+d506eff5b
yarn add @toptal/picasso-rich-text-editor@16.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.6+d506eff5b
yarn add @toptal/picasso-section@5.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-select@3.0.4-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-shared@15.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.194+d506eff5b
yarn add @toptal/picasso-show-more@2.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.17+d506eff5b
yarn add @toptal/picasso-skeleton-loader@1.0.38-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-slide@1.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.115+d506eff5b
yarn add @toptal/picasso-slider@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-step@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-switch@2.0.13-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-table@3.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-tabs@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-tag@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-tagselector@2.0.19-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-tailwind@2.8.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.96+d506eff5b
yarn add @toptal/picasso-tailwind-merge@2.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-test-utils@1.1.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.194+d506eff5b
yarn add @toptal/picasso-timeline@5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-timepicker@3.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-tooltip@1.1.6-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-tree-view@3.0.13-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b
yarn add @toptal/picasso-typography@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b
yarn add @toptal/picasso-typography-overflow@4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.8+d506eff5b
yarn add @toptal/picasso-user-badge@5.1.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.23+d506eff5b
yarn add @toptal/picasso-utils@1.0.4-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.194+d506eff5b

[sashuk]

@toptal-anvil ping reviewers

[ruslan-sed]

Nicely done!
Left some minor comments.

[sashuk]

@toptal-anvil ping reviewers