FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix(Dropdown): Provide option to not autofocus on first item by jeff-phillips-18 · Pull Request #2473 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

fix(Dropdown): Provide option to not autofocus on first item #2473

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 1 commit into from
Jul 8, 2019
Conversation 6 Commits 1 Checks 0 Files changed
Merged

fix(Dropdown): Provide option to not autofocus on first item #2473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension .js  (2) .md  (1) .snap  (5) All 3 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
        • DataList.test.js.snap
        • Dropdown.js
        • Dropdown.md
        • DropdownMenu.js
          • Dropdown.test.js.snap
      • Table.test.js.snap
7 changes: 7 additions & 0 deletions ...ct-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
>
<DropdownWithContext
aria-label="Application launcher"
autoFocus={true}
className=""
direction="up"
dropdownItems={
Expand Down Expand Up @@ -367,6 +368,7 @@ exports[`ApplicationLauncher dropup 1`] = `
>
<DropdownWithContext
aria-label="Application launcher"
autoFocus={true}
className=""
direction="up"
dropdownItems={
Expand Down Expand Up @@ -646,6 +648,7 @@ exports[`ApplicationLauncher expanded 1`] = `
>
<DropdownWithContext
aria-label="Application launcher"
autoFocus={true}
className=""
direction="down"
dropdownItems={
Expand Down Expand Up @@ -834,6 +837,7 @@ exports[`ApplicationLauncher expanded 1`] = `
</DropdownToggle>
<DropdownMenu
aria-labelledby="pf-toggle-id-4"
autoFocus={true}
className=""
component="ul"
isGrouped={false}
Expand All @@ -843,6 +847,7 @@ exports[`ApplicationLauncher expanded 1`] = `
>
<ul
aria-labelledby="pf-toggle-id-4"
autoFocus={true}
className="pf-c-app-launcher__menu"
hidden={false}
role="menu"
Expand Down Expand Up @@ -1263,6 +1268,7 @@ exports[`ApplicationLauncher regular 1`] = `
>
<DropdownWithContext
aria-label="Application launcher"
autoFocus={true}
className=""
direction="down"
dropdownItems={
Expand Down Expand Up @@ -1542,6 +1548,7 @@ exports[`ApplicationLauncher right aligned 1`] = `
>
<DropdownWithContext
aria-label="Application launcher"
autoFocus={true}
className=""
direction="down"
dropdownItems={
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ exports[`DataList DataListAction dropdown 1`] = `
className="pf-c-data-list__item-action"
>
<Dropdown
autoFocus={true}
className=""
direction="down"
dropdownItems={
Expand Down
7 changes: 7 additions & 0 deletions packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ const propTypes = {
dropdownItems: PropTypes.array,
/** Flag to indicate if menu is opened */
isOpen: PropTypes.bool,
/** Flag to indicate if the first dropdown item should gain initial focus, set false when adding
* a specific auto-focus item (like a current selection) otherwise leave as true (this is only applicable
* when passing an array of dropdownItems) */
autoFocus: PropTypes.bool,
/** Display the toggle with no border or background */
isPlain: PropTypes.bool,
/** Indicates where menu will be aligned horizontally */
Expand All @@ -45,6 +49,7 @@ const defaultProps = {
className: '',
dropdownItems: [],
isOpen: false,
autoFocus: true,
isPlain: false,
isGrouped: false,
position: DropdownPosition.left,
Expand All @@ -68,6 +73,7 @@ export class DropdownWithContext extends React.Component {
direction,
dropdownItems,
isOpen,
autoFocus,
isPlain,
isGrouped,
onSelect,
Expand Down Expand Up @@ -116,6 +122,7 @@ export class DropdownWithContext extends React.Component {
<DropdownMenu
component={component}
isOpen={isOpen}
autoFocus={autoFocus}
position={position}
aria-labelledby={id}
openedOnEnter={this.openedOnEnter}
Expand Down
75 changes: 74 additions & 1 deletion packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,63 @@ class SimpleDropdown extends React.Component {
}
```

## Dropdown with initial selection

```js
import React from 'react';
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle } from '@patternfly/react-core';
import { ThIcon } from '@patternfly/react-icons';

class IntialSelectionDropdown extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.onToggle = isOpen => {
this.setState({
isOpen
});
};
this.onSelect = event => {
this.setState({
isOpen: !this.state.isOpen
});
};
}

render() {
const { isOpen } = this.state;
const dropdownItems = [
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button" autoFocus>
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>,
<DropdownItem key="disabled action" isDisabled component="button">
Disabled Action
</DropdownItem>,
<DropdownSeparator key="separator" />,
<DropdownItem key="separated link">Separated Link</DropdownItem>,
<DropdownItem key="separated action" component="button">
Separated Action
</DropdownItem>
];
return (
<Dropdown
onSelect={this.onSelect}
toggle={<DropdownToggle onToggle={this.onToggle}>Dropdown</DropdownToggle>}
isOpen={isOpen}
dropdownItems={dropdownItems}
autoFocus={false}
/>
);
}
}
```

## Dropdown with groups

```js
Expand Down Expand Up @@ -584,7 +641,23 @@ class DropdownPanel extends React.Component {
toggle={<DropdownToggle onToggle={this.onToggle}>Expanded Dropdown</DropdownToggle>}
isOpen={isOpen}
>
<div>[Panel contents here]</div>
<ul className="pf-c-dropdown__menu">
<DropdownItem key="link">Link</DropdownItem>
<DropdownItem key="action" component="button" autoFocus>
Action
</DropdownItem>
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>
<DropdownItem key="disabled action" isDisabled component="button">
Disabled Action
</DropdownItem>
<DropdownSeparator key="separator" />
<DropdownItem key="separated link">Separated Link</DropdownItem>
<DropdownItem key="separated action" component="button">
Separated Action
</DropdownItem>
</ul>
</Dropdown>
);
}
Expand Down
24 changes: 16 additions & 8 deletions packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ const propTypes = {
isOpen: PropTypes.bool,
/** Flag to indicate if menu should be opened on enter */
openedOnEnter: PropTypes.bool,
/** Flag to indicate if the first dropdown item should gain initial focus, set false when adding
* a specific auto-focus item (like a current selection) otherwise leave as true */
autoFocus: PropTypes.bool,
/** Indicates which component will be used as dropdown menu */
component: componentShape,
/** Indicates where menu will be alligned horizontally */
Expand All @@ -32,6 +35,7 @@ const defaultProps = {
className: '',
isOpen: true,
openedOnEnter: false,
autoFocus: true,
position: DropdownPosition.left,
component: 'ul',
isGrouped: false
Expand All @@ -41,14 +45,18 @@ class DropdownMenu extends React.Component {
refsCollection = [];

componentDidMount() {
const focusTarget =
this.refsCollection.filter(
ref => ref && ((ref.current && !ref.current.hasAttribute('disabled')) || !ref.hasAttribute('disabled'))
)[0] || null;
if (this.props.component === 'ul') focusTarget && focusTarget.focus();
else {
(focusTarget.current.focus && focusTarget.current.focus()) ||
(focusTarget && ReactDOM.findDOMNode(focusTarget.current).focus()); // eslint-disable-line react/no-find-dom-node
const { autoFocus } = this.props;

redallen Jul 8, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Could also destructure component.

if (this.props.component === 'ul' && autoFocus) {
const focusTarget =
this.refsCollection.filter(

redallen Jul 8, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

.find() is equivalent to .filter()[0].
ref => ref && ((ref.current && !ref.current.hasAttribute('disabled')) || !ref.hasAttribute('disabled'))
)[0] || null;
if (this.props.component === 'ul') focusTarget && focusTarget.focus();
else {
(focusTarget.current.focus && focusTarget.current.focus()) ||
(focusTarget && ReactDOM.findDOMNode(focusTarget.current).focus()); // eslint-disable-line react/no-find-dom-node
}
}
}

Expand Down
Loading
Back | FazBrowse Home | New Git URL