In PeoplePicker, we can now use arrow keys to move cursor around #28655 #28975

azizChebbi · 2023-08-24T11:47:36Z

Previous Behavior

The problem was basically with the AutoFill component, pressing the left/right key was clearing the input field rather than moving the cursor in the right direction.

New Behavior

When pressing the left/right keys the cursor goes to the right direction, which is the expected behavior.

Related Issue(s)

In PeoplePicker, can not use arrow keys to move cursor around

Fixes [Bug]: In PeoplePicker, can not use arrow keys to move cursor around #28655

codesandbox-ci · 2023-08-24T12:01:58Z

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

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

fabricteam · 2023-08-24T12:05:30Z

📊 Bundle size report

_{🤖 This report was generated against a37c90201e40ee2b5cfa4372355788c244060e56}

size-auditor · 2023-08-24T12:12:27Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-ExtendedPicker	94.757 kB	94.788 kB	31 bytes
office-ui-fabric-react	fluentui-react-Autofill	15.334 kB	15.365 kB	31 bytes
office-ui-fabric-react	fluentui-react-TimePicker	232.57 kB	232.601 kB	31 bytes
office-ui-fabric-react	fluentui-react-ComboBox	242.348 kB	242.379 kB	31 bytes
office-ui-fabric-react	fluentui-react-Pickers	284.865 kB	284.896 kB	31 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: a37c90201e40ee2b5cfa4372355788c244060e56 (build)

fabricteam · 2023-08-24T12:15:28Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	608	652	5000
Breadcrumb	mount	1676	1685	1000
Checkbox	mount	1690	1703	5000
CheckboxBase	mount	1481	1485	5000
ChoiceGroup	mount	2965	2902	5000
ComboBox	mount	665	655	1000
CommandBar	mount	6172	6267	1000
ContextualMenu	mount	12050	13595	1000
DefaultButton	mount	731	733	5000
DetailsRow	mount	2201	2200	5000
DetailsRowFast	mount	2175	2195	5000
DetailsRowNoStyles	mount	2045	1983	5000
Dialog	mount	2589	2622	1000
DocumentCardTitle	mount	232	233	1000
Dropdown	mount	1952	1988	5000
FocusTrapZone	mount	1105	1125	5000
FocusZone	mount	1062	1061	5000
GroupedList	mount	40897	41312	2
GroupedList	virtual-rerender	19676	19541	2
GroupedList	virtual-rerender-with-unmount	49992	50272	2
GroupedListV2	mount	233	215	2
GroupedListV2	virtual-rerender	205	210	2
GroupedListV2	virtual-rerender-with-unmount	227	227	2
IconButton	mount	1068	1065	5000
Label	mount	334	325	5000
Layer	mount	2708	2709	5000
Link	mount	392	387	5000
MenuButton	mount	929	955	5000
MessageBar	mount	21185	21134	5000
Nav	mount	1935	1893	1000
OverflowSet	mount	775	758	5000
Panel	mount	1792	1767	1000
Persona	mount	738	730	1000
Pivot	mount	866	867	1000
PrimaryButton	mount	850	831	5000
Rating	mount	4556	4600	5000
SearchBox	mount	910	897	5000
Shimmer	mount	1864	1887	5000
Slider	mount	1299	1296	5000
SpinButton	mount	2836	2847	5000
Spinner	mount	388	385	5000
SplitButton	mount	1844	1776	5000
Stack	mount	400	395	5000
StackWithIntrinsicChildren	mount	841	856	5000
StackWithTextChildren	mount	2582	2645	5000
SwatchColorPicker	mount	6037	6104	5000
TagPicker	mount	1415	1469	5000
Text	mount	369	378	5000
TextField	mount	931	928	5000
ThemeProvider	mount	823	808	5000
ThemeProvider	virtual-rerender	581	566	5000
ThemeProvider	virtual-rerender-with-unmount	1272	1254	5000
Toggle	mount	599	605	5000
buttonNative	mount	185	193	5000

…mpty string

fabricteam · 2023-08-24T14:51:12Z

🕵 fluentuiv8 No visual regressions between this PR and main

azizChebbi · 2023-08-24T15:17:04Z

@azizChebbi please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
@microsoft-github-policy-service agree [company="{your company}"]
Options:

(default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
@microsoft-github-policy-service agree
(when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.
@microsoft-github-policy-service agree company="Microsoft"
Contributor License Agreement

azizChebbi · 2023-08-24T15:20:37Z

@microsoft-github-policy-service agree

sopranopillow · 2023-08-24T15:50:24Z

/azp run

azure-pipelines · 2023-08-24T15:50:44Z

Azure Pipelines successfully started running 4 pipeline(s).

change/@fluentui-react-7286e07c-b484-4545-a09e-fc93cdb6dea1.json

sopranopillow · 2023-08-24T22:10:40Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-08-24T22:10:50Z

Azure Pipelines successfully started running 1 pipeline(s).

sopranopillow · 2023-08-25T17:40:58Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-08-25T17:41:09Z

Azure Pipelines successfully started running 1 pipeline(s).

* master: (23 commits) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) applying package updates ...

* master: (24 commits) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) ...

* master: (26 commits) chore: Make triage bot add needs triage label to new issues (microsoft#28994) fix(react-tags-preview): use regular icon for dismiss (microsoft#28958) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) ...

azizChebbi requested review from a team as code owners August 24, 2023 11:47

I changed the default value as the previous state value rather than e…

84e39cc

…mpty string

azizChebbi force-pushed the PeoplePicker branch from f3ecf47 to 84e39cc Compare August 24, 2023 13:30

changement details json

3162703

azizChebbi closed this Aug 24, 2023

azizChebbi reopened this Aug 24, 2023

sopranopillow approved these changes Aug 24, 2023

View reviewed changes

change/@fluentui-react-7286e07c-b484-4545-a09e-fc93cdb6dea1.json Outdated Show resolved Hide resolved

Update change/@fluentui-react-7286e07c-b484-4545-a09e-fc93cdb6dea1.json

3081a4d

sopranopillow enabled auto-merge (squash) August 24, 2023 18:22

azizChebbi added 4 commits August 24, 2023 23:54

Merge branch 'master' into PeoplePicker

b1cf1d0

Merge branch 'master' into PeoplePicker

ef8b379

Merge branch 'master' into PeoplePicker

a66036d

Merge branch 'master' into PeoplePicker

dbb8298

sopranopillow merged commit 773de21 into microsoft:master Aug 25, 2023

microsoft-github-policy-service bot added Component: $1 Component: PeoplePicker labels Aug 25, 2023

In PeoplePicker, we can now use arrow keys to move cursor around #28655 #28975

In PeoplePicker, we can now use arrow keys to move cursor around #28655 #28975

Uh oh!

Conversation

azizChebbi commented Aug 24, 2023 • edited by sopranopillow Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci bot commented Aug 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Aug 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Aug 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Aug 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Aug 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

azizChebbi commented Aug 24, 2023

Uh oh!

azizChebbi commented Aug 24, 2023

Uh oh!

sopranopillow commented Aug 24, 2023

Uh oh!

azure-pipelines bot commented Aug 24, 2023

Uh oh!

Uh oh!

sopranopillow commented Aug 24, 2023

Uh oh!

azure-pipelines bot commented Aug 24, 2023

Uh oh!

sopranopillow commented Aug 25, 2023

Uh oh!

azure-pipelines bot commented Aug 25, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

azizChebbi commented Aug 24, 2023 •

edited by sopranopillow

Loading

codesandbox-ci bot commented Aug 24, 2023 •

edited

Loading

fabricteam commented Aug 24, 2023 •

edited

Loading

size-auditor bot commented Aug 24, 2023 •

edited

Loading

fabricteam commented Aug 24, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Aug 24, 2023 •

edited

Loading