Skip to content

Commit

Permalink
fix(modal): find primary focus element for selectorPrimaryFocus
Browse files Browse the repository at this point in the history
  • Loading branch information
Eric Liu authored and Eric Liu committed Oct 2, 2019
1 parent a537961 commit 6e31d1a
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 5 deletions.
31 changes: 31 additions & 0 deletions packages/react/src/components/Modal/Modal-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { action } from '@storybook/addon-actions';

import { withKnobs, boolean, text } from '@storybook/addon-knobs';
import Modal from '../Modal';
import TextInput from '../TextInput';
import { settings } from 'carbon-components';

const { prefix } = settings;
Expand Down Expand Up @@ -74,4 +75,34 @@ storiesOf('Modal', module)
`,
},
}
)
.add(
'Trap Focus',
() => (
<>
<Modal
{...props()}
selectorPrimaryFocus="#text-input-2"
focusTrap={true}>
<TextInput
id="text-input-1"
labelText="Text Input 1"
placeholder="Enter text..."
style={{ marginBottom: '1rem' }}
/>
<TextInput
id="text-input-2"
labelText="Text Input 2"
placeholder="Enter text..."
/>
</Modal>
</>
),
{
info: {
text: `
Specify a selector for the primary element to focus when opening a modal.
`,
},
}
);
10 changes: 5 additions & 5 deletions packages/react/src/components/Modal/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -220,12 +220,12 @@ export default class Modal extends Component {
}

initialFocus = focusContainerElement => {
const primaryFocusElement = focusContainerElement
? focusContainerElement.querySelector(this.props.selectorPrimaryFocus)
: null;
if (primaryFocusElement) {
return primaryFocusElement;
if (!focusContainerElement && this.props.focusTrap) {
return document.querySelector(
`.bx--modal.is-visible ${this.props.selectorPrimaryFocus}`
);
}

return this.button && this.button.current;
};

Expand Down

0 comments on commit 6e31d1a

Please sign in to comment.