Skip to content

feat: react-combobox space conditionally inserts character when freeform is true#27025

Merged
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:combo-space
Apr 26, 2023
Merged

feat: react-combobox space conditionally inserts character when freeform is true#27025
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:combo-space

Conversation

@smhigley
Copy link
Contributor

@smhigley smhigley commented Mar 1, 2023

Previous Behavior

Out of the box, the space key always selected the current option.

New Behavior

Only for freeform comboboxes, a separate typing/not typing state is tracked, and when the user is typing the space key inserts a character instead of selecting an option. The conditions for this to happen are:

  • If the freeform combobox is closed, space always inserts a character
  • If the user's previous keyboard interaction was to insert characters into the text input, space while also insert a character
  • If the user has typed, and not used up/down/page up/page down/home/end, or opened the combobox with enter or alt+down since the last typing interaction.

An example: if the user types "hello" and then space, the space character will be inserted. If the user types "hello" and then moves the text insertion character to "h" and presses space, the space character will also be inserted (since they didn't open the dropdown or navigate options since they last typed).

If the user types "hello" and then arrows through a few options and then presses space, the space key will select the highlighted option.

Non-freeform comboboxes do not change behavior and always use space to select.

Related Issue(s)

@smhigley smhigley requested a review from a team as a code owner March 1, 2023 19:49
@smhigley smhigley self-assigned this Mar 1, 2023
@github-actions github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 1, 2023
@size-auditor
Copy link

size-auditor bot commented Mar 1, 2023 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: fa0f2ce25e94ddc8759f545638e01cc34e0e99f4 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 1, 2023 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox (including child components)		 87.056 kB
28.011 kB		 87.356 kB
28.141 kB		 300 B
130 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-combobox
Dropdown (including child components)		 85.74 kB
27.747 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 65.31 kB
17.931 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 204.498 kB
57.184 kB
react-components
react-components: FluentProvider & webLightTheme		 36.086 kB
11.9 kB
react-portal-compat
PortalCompatProvider		 6.446 kB
2.186 kB
🤖 This report was generated against fa0f2ce25e94ddc8759f545638e01cc34e0e99f4

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 1, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 22 20 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 697 735 5000
Button mount 380 362 5000
Field mount 1247 1259 5000
FluentProvider mount 893 905 5000
FluentProviderWithTheme mount 116 113 10
FluentProviderWithTheme virtual-rerender 98 92 10
FluentProviderWithTheme virtual-rerender-with-unmount 100 101 10
InfoButton mount 22 20 5000 Possible regression
MakeStyles mount 1110 1134 50000
Persona mount 2001 1994 5000
SpinButton mount 1538 1572 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 1, 2023 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1964974:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 1, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@layershifter layershifter mentioned this pull request Apr 11, 2023
Closed
2 tasks
@smhigley smhigley enabled auto-merge (squash) April 26, 2023 14:00
@smhigley smhigley merged commit 37e89b9 into microsoft:master Apr 26, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 27, 2023
@marcosmoura
Merge branch 'master' into feat/drawer-components
cbca31c 
* master:
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  chore: migrate to NodeJS v16 (microsoft#27711)
  remove react-avatar-context package (microsoft#27709)
  test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669)
  chore: Add caret to react-datepicker-compat dependencies (microsoft#27671)
  test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661)
  chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702)
  chore: enforce files naming to use .styles.ts (microsoft#27698)
  feat: adds lazy loading example (microsoft#27587)
  feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025)
  chore(react-tree): updates useOpenItemsState internals (microsoft#27697)
  feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668)
  test: use `isolatedModules` for all ts-jest configs to lower memory footprint on CI (microsoft#27670)
  chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming (microsoft#27687)
  feat(react-tree): makes useFlatTree generic (microsoft#27682)
  Enable export to codepen for charting library (microsoft#27539)
  Overflow: added useOverflowCount to exports (microsoft#27678)
  fix: Menu should not steal focus on re-render (microsoft#27688)
  feat(react-conformance): add new TS config api to be able to specify configName and configDir (microsoft#27664)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 27, 2023
@marcosmoura
Merge branch 'feat/drawer-components' into feat/drawer-header
275aae4 
* feat/drawer-components: (28 commits)
  docs: update API
  feat: add style overrides for upcoming drawer components
  feat: add support to override drawer styles
  fix: prevent elements from stretching
  chore: upgrade devcontainer node version to 16 (microsoft#27716)
  fix: rename styles file to use the newer naming conventions
  test: add cypress tests for scroll positions
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  feat: add support to override drawer body styles
  chore: migrate to NodeJS v16 (microsoft#27711)
  remove react-avatar-context package (microsoft#27709)
  test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669)
  chore: Add caret to react-datepicker-compat dependencies (microsoft#27671)
  test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661)
  chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702)
  chore: enforce files naming to use .styles.ts (microsoft#27698)
  feat: adds lazy loading example (microsoft#27587)
  feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025)
  chore(react-tree): updates useOpenItemsState internals (microsoft#27697)
  feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668)
  ...
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-combobox@v9.3.0 has been released which incorporates this pull request.:tada:

Handy links:

@smhigley smhigley deleted the combo-space branch January 11, 2024 21:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@GeoffCoxMSFT GeoffCoxMSFT GeoffCoxMSFT approved these changes

@spmonahan spmonahan spmonahan approved these changes

Assignees

@smhigley smhigley

Labels

Component: Combobox

Projects

None yet

Milestone

April Project Cycle Q2 2023

Development

Successfully merging this pull request may close these issues.

[Bug]: Cannot type space in a Combobox when freefrom is enabled

5 participants

@smhigley @fabricteam @msft-fluent-ui-bot @GeoffCoxMSFT @spmonahan