Skip to content

Cherry Pick: DetailsList isSelectedOnFocus #23548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spmonahan merged 6 commits into from
Jun 15, 2022
Merged

Cherry Pick: DetailsList isSelectedOnFocus #23548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e568b8d
feat: add isSelectedOnFocus prop to DetailsList (#23467)
spmonahan Jun 10, 2022
27598bb
chore: update snapshots
spmonahan Jun 14, 2022
611a08c
Change files
spmonahan Jun 14, 2022
989d212
update api snapshot
spmonahan Jun 14, 2022
a592e4b
updating Dropdown snapshots
sopranopillow Jun 15, 2022
39af26b
Update change/@fluentui-react-1c69b2a4-8b4f-43fd-bfb9-02d2307b9b4b.json
spmonahan Jun 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-1c69b2a4-8b4f-43fd-bfb9-02d2307b9b4b.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "feat: add isSelectedOnFocus prop to DetailsList",
"packageName": "@fluentui/react",
"email": "seanmonahan@microsoft.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/office-ui-fabric-react-bae1fc2f-77ce-4ed2-b613-0ee749776074.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "feat: add isSelectedOnFocus prop to DetailsList (#23467)",
"packageName": "office-ui-fabric-react",
"email": "seanmonahan@microsoft.com",
"dependentChangeType": "patch"
}
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3820,6 +3820,7 @@ export interface IDetailsListProps extends IBaseProps<IDetailsList>, IWithViewpo
initialFocusedIndex?: number;
isHeaderVisible?: boolean;
isPlaceholderData?: boolean;
isSelectedOnFocus?: boolean;
items: any[];
layoutMode?: DetailsListLayoutMode;
listProps?: IListProps;
Expand Down
6 changes: 4 additions & 2 deletions packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
onRowDidMount,
onRowWillUnmount,
disableSelectionZone,
isSelectedOnFocus = true,
onColumnResized,
onColumnAutoResized,
onToggleCollapse,
Expand Down Expand Up @@ -594,7 +595,7 @@ const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
if (focusZoneRef.current && focusZoneRef.current.focus()) {
// select the first item in list after down arrow key event
// only if nothing was selected; otherwise start with the already-selected item
if (selection.getSelectedIndices().length === 0) {
if (isSelectedOnFocus && selection.getSelectedIndices().length === 0) {
selection.setIndexSelected(0, true, false);
}

Expand All @@ -603,7 +604,7 @@ const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
}
}
},
[selection, focusZoneRef],
[selection, focusZoneRef, isSelectedOnFocus],
);

const onContentKeyDown = React.useCallback(
Expand Down Expand Up @@ -680,6 +681,7 @@ const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
selection={selection}
selectionPreservedOnEmptyClick={selectionPreservedOnEmptyClick}
selectionMode={selectionMode}
isSelectedOnFocus={isSelectedOnFocus}
onItemInvoked={onItemInvoked}
onItemContextMenu={onItemContextMenu}
enterModalOnTouch={enterModalSelectionOnTouch}
Expand Down
57 changes: 57 additions & 0 deletions packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,63 @@ describe('DetailsList', () => {
);
});

it('focuses row by arrow key', () => {
jest.useFakeTimers();

let component: IDetailsList | null;
const onSelectionChanged = jest.fn();
const selection = new Selection({
onSelectionChanged,
});
safeMount(
<DetailsList
componentRef={ref => (component = ref)}
items={mockData(5)}
selection={selection}
skipViewportMeasures={true}
onShouldVirtualize={() => false}
/>,
wrapper => {
expect(component).toBeTruthy();
component!.focusIndex(0);
jest.runAllTimers();

onSelectionChanged.mockClear();
wrapper.find('.ms-DetailsList-headerWrapper').simulate('keyDown', { which: KeyCodes.down });
expect(onSelectionChanged).toHaveBeenCalledTimes(1);
},
);
});

it('does not focus by arrow key when isSelectedOnFocus is `false`', () => {
jest.useFakeTimers();

let component: IDetailsList | null;
const onSelectionChanged = jest.fn();
const selection = new Selection({
onSelectionChanged,
});
safeMount(
<DetailsList
componentRef={ref => (component = ref)}
items={mockData(5)}
selection={selection}
skipViewportMeasures={true}
onShouldVirtualize={() => false}
isSelectedOnFocus={false}
/>,
wrapper => {
expect(component).toBeTruthy();
component!.focusIndex(0);
jest.runAllTimers();

onSelectionChanged.mockClear();
wrapper.find('.ms-DetailsList-headerWrapper').simulate('keyDown', { which: KeyCodes.down });
expect(onSelectionChanged).toHaveBeenCalledTimes(0);
},
);
});

it('invokes optional onRenderMissingItem prop once per missing item rendered', () => {
const onRenderMissingItem = jest.fn();
const items = [...mockData(5), null, null];
Expand Down
7 changes: 7 additions & 0 deletions packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,13 @@ export interface IDetailsListProps extends IBaseProps<IDetailsList>, IWithViewpo
/** Whether to disable the built-in SelectionZone, so the host component can provide its own. */
disableSelectionZone?: boolean;

/**
* Determines if an item is selected on focus.
*
* @defaultvalue true
*/
isSelectedOnFocus?: boolean;

/** Whether to animate updates */
enableUpdateAnimations?: boolean;

Expand Down
44 changes: 22 additions & 22 deletions ...office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ exports[`DetailsList handles paged updates to items within groups 1`] = `
min-width: 100%;
}
data-automationid="GroupedList"
data-focuszone-id="FocusZone247"
data-focuszone-id="FocusZone276"
data-is-scrollable="false"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -139,7 +139,7 @@ exports[`DetailsList handles paged updates to items within groups 1`] = `
<div
aria-label="two 1"
className="ms-List"
id="GroupedListSection248"
id="GroupedListSection277"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -210,7 +210,7 @@ exports[`DetailsList handles paged updates to items within groups 1`] = `
<div
aria-label="two 2"
className="ms-List"
id="GroupedListSection249"
id="GroupedListSection278"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -364,7 +364,7 @@ exports[`DetailsList handles paged updates to items within groups 2`] = `
min-width: 100%;
}
data-automationid="GroupedList"
data-focuszone-id="FocusZone247"
data-focuszone-id="FocusZone276"
data-is-scrollable="false"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -405,7 +405,7 @@ exports[`DetailsList handles paged updates to items within groups 2`] = `
<div
aria-label="two 1"
className="ms-List"
id="GroupedListSection248"
id="GroupedListSection277"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -484,7 +484,7 @@ exports[`DetailsList handles paged updates to items within groups 2`] = `
<div
aria-label="two 2"
className="ms-List"
id="GroupedListSection249"
id="GroupedListSection278"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -646,7 +646,7 @@ exports[`DetailsList handles updates to items and groups 1`] = `
min-width: 100%;
}
data-automationid="GroupedList"
data-focuszone-id="FocusZone236"
data-focuszone-id="FocusZone265"
data-is-scrollable="false"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -687,7 +687,7 @@ exports[`DetailsList handles updates to items and groups 1`] = `
<div
aria-label="one 1"
className="ms-List"
id="GroupedListSection237"
id="GroupedListSection266"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -748,7 +748,7 @@ exports[`DetailsList handles updates to items and groups 1`] = `
<div
aria-label="one 2"
className="ms-List"
id="GroupedListSection238"
id="GroupedListSection267"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -809,7 +809,7 @@ exports[`DetailsList handles updates to items and groups 1`] = `
<div
aria-label="one 3"
className="ms-List"
id="GroupedListSection239"
id="GroupedListSection268"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -870,7 +870,7 @@ exports[`DetailsList handles updates to items and groups 1`] = `
<div
aria-label="one 4"
className="ms-List"
id="GroupedListSection240"
id="GroupedListSection269"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1014,7 +1014,7 @@ exports[`DetailsList handles updates to items and groups 2`] = `
min-width: 100%;
}
data-automationid="GroupedList"
data-focuszone-id="FocusZone236"
data-focuszone-id="FocusZone265"
data-is-scrollable="false"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1055,7 +1055,7 @@ exports[`DetailsList handles updates to items and groups 2`] = `
<div
aria-label="one 1"
className="ms-List"
id="GroupedListSection237"
id="GroupedListSection266"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1116,7 +1116,7 @@ exports[`DetailsList handles updates to items and groups 2`] = `
<div
aria-label="one 2"
className="ms-List"
id="GroupedListSection238"
id="GroupedListSection267"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1177,7 +1177,7 @@ exports[`DetailsList handles updates to items and groups 2`] = `
<div
aria-label="one 3"
className="ms-List"
id="GroupedListSection239"
id="GroupedListSection268"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1238,7 +1238,7 @@ exports[`DetailsList handles updates to items and groups 2`] = `
<div
aria-label="one 4"
className="ms-List"
id="GroupedListSection240"
id="GroupedListSection269"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1382,7 +1382,7 @@ exports[`DetailsList handles updates to items and groups 3`] = `
min-width: 100%;
}
data-automationid="GroupedList"
data-focuszone-id="FocusZone236"
data-focuszone-id="FocusZone265"
data-is-scrollable="false"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1423,7 +1423,7 @@ exports[`DetailsList handles updates to items and groups 3`] = `
<div
aria-label="two 1"
className="ms-List"
id="GroupedListSection243"
id="GroupedListSection272"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1502,7 +1502,7 @@ exports[`DetailsList handles updates to items and groups 3`] = `
<div
aria-label="two 2"
className="ms-List"
id="GroupedListSection244"
id="GroupedListSection273"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1664,7 +1664,7 @@ exports[`DetailsList handles updates to items and groups 4`] = `
min-width: 100%;
}
data-automationid="GroupedList"
data-focuszone-id="FocusZone236"
data-focuszone-id="FocusZone265"
data-is-scrollable="false"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1705,7 +1705,7 @@ exports[`DetailsList handles updates to items and groups 4`] = `
<div
aria-label="two 1"
className="ms-List"
id="GroupedListSection243"
id="GroupedListSection272"
role="rowgroup"
>
<div
Expand Down Expand Up @@ -1784,7 +1784,7 @@ exports[`DetailsList handles updates to items and groups 4`] = `
<div
aria-label="two 2"
className="ms-List"
id="GroupedListSection244"
id="GroupedListSection273"
role="rowgroup"
>
<div
Expand Down