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

smhigley · 2023-03-01T19:49:24Z

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)

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

size-auditor · 2023-03-01T20:02:03Z

Asset size changes

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

Baseline commit: fa0f2ce25e94ddc8759f545638e01cc34e0e99f4 (build)

fabricteam · 2023-03-01T20:04:03Z

📊 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 · 2023-03-01T20:05:24Z

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 · 2023-03-01T20:05:28Z

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 · 2023-03-01T20:15:24Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx

* 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)

* 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 · 2023-05-15T07:45:34Z

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

Handy links:

smhigley added 2 commits March 1, 2023 11:39

feat: space character insertion while typing in freeform combobox

7d0cd6f

change file

ebe0b2b

smhigley requested a review from a team as a code owner March 1, 2023 19:49

smhigley self-assigned this Mar 1, 2023

msft-fluent-ui-bot added the Component: Combobox label Mar 1, 2023

github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 1, 2023

GeoffCoxMSFT reviewed Apr 6, 2023

View reviewed changes

packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx Show resolved Hide resolved

GeoffCoxMSFT approved these changes Apr 6, 2023

View reviewed changes

spmonahan approved these changes Apr 6, 2023

View reviewed changes

layershifter mentioned this pull request Apr 11, 2023

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

Closed

2 tasks

use ref instead of state to prevent unnecessary rerenders

1964974

github-actions bot modified the milestones: March Project Cycle Q1 2023, April Project Cycle Q2 2023 Apr 26, 2023

smhigley enabled auto-merge (squash) April 26, 2023 14:00

smhigley merged commit 37e89b9 into microsoft:master Apr 26, 2023

smhigley deleted the combo-space branch January 11, 2024 21:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

smhigley commented Mar 1, 2023

size-auditor bot commented Mar 1, 2023 •

edited

Loading

fabricteam commented Mar 1, 2023 •

edited

Loading

fabricteam commented Mar 1, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 1, 2023 •

edited

Loading

fabricteam commented Mar 1, 2023 •

edited

Loading

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

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

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

Conversation

smhigley commented Mar 1, 2023

Previous Behavior

New Behavior

Related Issue(s)

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

Asset size changes

fabricteam commented Mar 1, 2023 • edited Loading

📊 Bundle size report

fabricteam commented Mar 1, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

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

fabricteam commented Mar 1, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

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

size-auditor bot commented Mar 1, 2023 •

edited

Loading

fabricteam commented Mar 1, 2023 •

edited

Loading

fabricteam commented Mar 1, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Mar 1, 2023 •

edited

Loading

fabricteam commented Mar 1, 2023 •

edited

Loading