Skip to content

fix(dropdown): Keyboard selection of toggle causes selection of parent #3816

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
redallen merged 3 commits into from
Feb 25, 2020
Merged

fix(dropdown): Keyboard selection of toggle causes selection of parent #3816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21d341f
Stop event bubbling in toggle selection unless set to
jessiehuff Feb 21, 2020
16048c2
Update snapshots
jessiehuff Feb 21, 2020
f530220
Update snapshots
jessiehuff Feb 21, 2020
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
12 changes: 12 additions & 0 deletions .../components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
<Toggle
aria-label="Application launcher"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="pf-toggle-id-5"
isActive={false}
Expand Down Expand Up @@ -507,6 +508,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
aria-expanded={true}
aria-haspopup={true}
aria-label="Application launcher"
bubbleEvent={false}
className="pf-c-app-launcher__toggle"
disabled={false}
id="pf-toggle-id-5"
Expand Down Expand Up @@ -1161,6 +1163,7 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
<Toggle
aria-label="Application launcher"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="pf-toggle-id-3"
isActive={false}
Expand Down Expand Up @@ -1212,6 +1215,7 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Application launcher"
bubbleEvent={false}
className="pf-c-app-launcher__toggle"
disabled={false}
id="pf-toggle-id-3"
Expand Down Expand Up @@ -1549,6 +1553,7 @@ exports[`ApplicationLauncher dropup 1`] = `
<Toggle
aria-label="Application launcher"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="pf-toggle-id-2"
isActive={false}
Expand Down Expand Up @@ -1600,6 +1605,7 @@ exports[`ApplicationLauncher dropup 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Application launcher"
bubbleEvent={false}
className="pf-c-app-launcher__toggle"
disabled={false}
id="pf-toggle-id-2"
Expand Down Expand Up @@ -2017,6 +2023,7 @@ exports[`ApplicationLauncher expanded 1`] = `
<Toggle
aria-label="Application launcher"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="pf-toggle-id-4"
isActive={false}
Expand Down Expand Up @@ -2148,6 +2155,7 @@ exports[`ApplicationLauncher expanded 1`] = `
aria-expanded={true}
aria-haspopup={true}
aria-label="Application launcher"
bubbleEvent={false}
className="pf-c-app-launcher__toggle"
disabled={false}
id="pf-toggle-id-4"
Expand Down Expand Up @@ -2800,6 +2808,7 @@ exports[`ApplicationLauncher regular 1`] = `
<Toggle
aria-label="Application launcher"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="pf-toggle-id-0"
isActive={false}
Expand Down Expand Up @@ -2851,6 +2860,7 @@ exports[`ApplicationLauncher regular 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Application launcher"
bubbleEvent={false}
className="pf-c-app-launcher__toggle"
disabled={false}
id="pf-toggle-id-0"
Expand Down Expand Up @@ -3188,6 +3198,7 @@ exports[`ApplicationLauncher right aligned 1`] = `
<Toggle
aria-label="Application launcher"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="pf-toggle-id-1"
isActive={false}
Expand Down Expand Up @@ -3239,6 +3250,7 @@ exports[`ApplicationLauncher right aligned 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Application launcher"
bubbleEvent={false}
className="pf-c-app-launcher__toggle"
disabled={false}
id="pf-toggle-id-1"
Expand Down
4 changes: 4 additions & 0 deletions packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export interface KebabToggleProps extends DropdownToggleProps {
isPlain?: boolean;
/** Type to put on the button */
type?: 'button' | 'submit' | 'reset';
/** Allows selecting toggle to select parent */
bubbleEvent?: boolean;
}

export const KebabToggle: React.FunctionComponent<KebabToggleProps> = ({
Expand All @@ -45,6 +47,7 @@ export const KebabToggle: React.FunctionComponent<KebabToggleProps> = ({
isActive = false,
isPlain = false,
isDisabled = false,
bubbleEvent = false,
onToggle = () => undefined as void,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ref, // Types of Ref are different for React.FC vs React.Component
Expand All @@ -62,6 +65,7 @@ export const KebabToggle: React.FunctionComponent<KebabToggleProps> = ({
isPlain={isPlain}
isDisabled={isDisabled}
onToggle={onToggle}
bubbleEvent={bubbleEvent}
{...props}
>
<EllipsisVIcon />
Expand Down
8 changes: 7 additions & 1 deletion packages/patternfly-4/react-core/src/components/Dropdown/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export interface ToggleProps {
isSplitButton?: boolean;
/** Flag for aria popup */
ariaHasPopup?: boolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'listbox' | 'tree';
/** Allows selecting toggle to select parent */
bubbleEvent?: boolean;
}

export class Toggle extends React.Component<ToggleProps> {
Expand All @@ -57,7 +59,8 @@ export class Toggle extends React.Component<ToggleProps> {
isPrimary: false,
isSplitButton: false,
onToggle: () => {},
onEnter: () => {}
onEnter: () => {},
bubbleEvent: false
};

componentDidMount = () => {
Expand Down Expand Up @@ -103,6 +106,9 @@ export class Toggle extends React.Component<ToggleProps> {
if (event.key === 'Tab' && !this.props.isOpen) {
return;
}
if (!this.props.bubbleEvent) {
event.stopPropagation();
}
event.preventDefault();
if ((event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') && this.props.isOpen) {
this.props.onToggle(!this.props.isOpen, event);
Expand Down
1 change: 1 addition & 0 deletions ...-core/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
exports[`KebabToggle should match snapshot (auto-generated) 1`] = `
<Toggle
aria-label="'Actions'"
bubbleEvent={false}
className="''"
id="''"
isActive={false}
Expand Down
28 changes: 28 additions & 0 deletions ...rnfly-4/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ exports[`KebabToggle basic 1`] = `
<Toggle
aria-label="Actions"
ariaHasPopup={false}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -162,6 +163,7 @@ exports[`KebabToggle basic 1`] = `
aria-expanded={true}
aria-haspopup={false}
aria-label="Actions"
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -848,6 +850,7 @@ exports[`KebabToggle dropup + right aligned 1`] = `
<Toggle
aria-label="Actions"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -896,6 +899,7 @@ exports[`KebabToggle dropup + right aligned 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Actions"
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -1557,6 +1561,7 @@ exports[`KebabToggle dropup 1`] = `
<Toggle
aria-label="Actions"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -1605,6 +1610,7 @@ exports[`KebabToggle dropup 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Actions"
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -2341,6 +2347,7 @@ exports[`KebabToggle expanded 1`] = `
<Toggle
aria-label="Actions"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -2464,6 +2471,7 @@ exports[`KebabToggle expanded 1`] = `
aria-expanded={true}
aria-haspopup={true}
aria-label="Actions"
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -3394,6 +3402,7 @@ exports[`KebabToggle plain 1`] = `
<Toggle
aria-label="Actions"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -3442,6 +3451,7 @@ exports[`KebabToggle plain 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Actions"
bubbleEvent={false}
className="pf-c-dropdown__toggle pf-m-plain"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -4100,6 +4110,7 @@ exports[`KebabToggle regular 1`] = `
<Toggle
aria-label="Actions"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -4148,6 +4159,7 @@ exports[`KebabToggle regular 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Actions"
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -4809,6 +4821,7 @@ exports[`KebabToggle right aligned 1`] = `
<Toggle
aria-label="Actions"
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -4857,6 +4870,7 @@ exports[`KebabToggle right aligned 1`] = `
aria-expanded={false}
aria-haspopup={true}
aria-label="Actions"
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -5019,6 +5033,7 @@ exports[`dropdown basic 1`] = `
>
<Toggle
ariaHasPopup={false}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -5078,6 +5093,7 @@ exports[`dropdown basic 1`] = `
<button
aria-expanded={true}
aria-haspopup={false}
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -5783,6 +5799,7 @@ exports[`dropdown dropup + right aligned 1`] = `
>
<Toggle
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -5835,6 +5852,7 @@ exports[`dropdown dropup + right aligned 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -6515,6 +6533,7 @@ exports[`dropdown dropup 1`] = `
>
<Toggle
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -6567,6 +6586,7 @@ exports[`dropdown dropup 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -7322,6 +7342,7 @@ exports[`dropdown expanded 1`] = `
>
<Toggle
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -7449,6 +7470,7 @@ exports[`dropdown expanded 1`] = `
<button
aria-expanded={true}
aria-haspopup={true}
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -8400,6 +8422,7 @@ exports[`dropdown primary 1`] = `
>
<Toggle
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -8452,6 +8475,7 @@ exports[`dropdown primary 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
bubbleEvent={false}
className="pf-c-dropdown__toggle pf-m-primary"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -9129,6 +9153,7 @@ exports[`dropdown regular 1`] = `
>
<Toggle
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -9181,6 +9206,7 @@ exports[`dropdown regular 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down Expand Up @@ -9861,6 +9887,7 @@ exports[`dropdown right aligned 1`] = `
>
<Toggle
ariaHasPopup={true}
bubbleEvent={false}
className=""
id="Dropdown Toggle"
isActive={false}
Expand Down Expand Up @@ -9913,6 +9940,7 @@ exports[`dropdown right aligned 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
bubbleEvent={false}
className="pf-c-dropdown__toggle"
disabled={false}
id="Dropdown Toggle"
Expand Down
Loading