Skip to content

TextField type="number" retains focus on blur #7718

@GxDesign

Description

@GxDesign

Issue summary

TextField component with type "number" keeps focus when incremented or decremented using the arrows.

Expected behavior

Focus state is removed on blur

Actual behavior

Input remains with focused outline

Steps to reproduce the problem

  1. Go to https://polaris.shopify.com/components/text-field and select Number
  2. Increment the expected quantities using the arrows
  3. Click outside of the input

image

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

  • Are you using the React components? (Y/N): Y
  • Polaris version number: 10.7.0
  • Browser: Chrome
  • Device: Macbook Pro M1
  • Operating System:12.6

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

  System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 60.34 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.17 - ~/.dev/yarn/1.22.17/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v16.17.1/bin/npm
    Watchman: 2022.08.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 107.0.5304.110
    Safari: 16.0
  npmPackages:
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 

fbs [gian/54965-boxed-quantities]
% npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris

  System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 83.17 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.17 - ~/.dev/yarn/1.22.17/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v16.17.1/bin/npm
    Watchman: 2022.08.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 107.0.5304.110
    Safari: 16.0
  npmPackages:
    @shopify/polaris: 10.7.0 => 10.7.0 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 

Metadata

Metadata

Assignees

Labels

BugSomething is broken and not working as intended in the system.Good first issue

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions