Skip to content

Commit

Permalink
Put toggle button back into tab order.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjcenizal
cjcenizal committed May 24, 2018
1 parent d164eac commit 9f5c26c
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 29 deletions.
21 changes: 14 additions & 7 deletions src/components/combo_box/__snapshots__/combo_box.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,20 @@ exports[`EuiComboBox is rendered 1`] = `
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
clearButtonRef={[Function]}
hasSelectedOptions={false}
inputRef={[Function]}
isListOpen={false}
onChange={[Function]}
onClear={[Function]}
onClick={[Function]}
onCloseListClick={[Function]}
onFocus={[Function]}
onOpenListClick={[Function]}
onRemoveOption={[Function]}
searchValue=""
selectedOptions={Array []}
singleSelection={false}
toggleButtonRef={[Function]}
updatePosition={[Function]}
value=""
/>
Expand All @@ -39,12 +40,12 @@ exports[`props isClearable is false with selectedOptions 1`] = `
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
clearButtonRef={[Function]}
hasSelectedOptions={true}
inputRef={[Function]}
isListOpen={false}
onChange={[Function]}
onClick={[Function]}
onCloseListClick={[Function]}
onFocus={[Function]}
onOpenListClick={[Function]}
onRemoveOption={[Function]}
Expand All @@ -60,6 +61,7 @@ exports[`props isClearable is false with selectedOptions 1`] = `
]
}
singleSelection={false}
toggleButtonRef={[Function]}
updatePosition={[Function]}
value="Mimas, Iapetus"
/>
Expand All @@ -76,18 +78,19 @@ exports[`props isClearable is false without selectedOptions 1`] = `
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
clearButtonRef={[Function]}
hasSelectedOptions={false}
inputRef={[Function]}
isListOpen={false}
onChange={[Function]}
onClick={[Function]}
onCloseListClick={[Function]}
onFocus={[Function]}
onOpenListClick={[Function]}
onRemoveOption={[Function]}
searchValue=""
selectedOptions={Array []}
singleSelection={false}
toggleButtonRef={[Function]}
updatePosition={[Function]}
value=""
/>
Expand All @@ -104,13 +107,13 @@ exports[`props isDisabled 1`] = `
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
clearButtonRef={[Function]}
hasSelectedOptions={true}
inputRef={[Function]}
isDisabled={true}
isListOpen={false}
onChange={[Function]}
onClick={[Function]}
onCloseListClick={[Function]}
onFocus={[Function]}
onOpenListClick={[Function]}
onRemoveOption={[Function]}
Expand All @@ -123,6 +126,7 @@ exports[`props isDisabled 1`] = `
]
}
singleSelection={false}
toggleButtonRef={[Function]}
updatePosition={[Function]}
value="Mimas"
/>
Expand All @@ -139,19 +143,20 @@ exports[`props options 1`] = `
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
clearButtonRef={[Function]}
hasSelectedOptions={false}
inputRef={[Function]}
isListOpen={false}
onChange={[Function]}
onClear={[Function]}
onClick={[Function]}
onCloseListClick={[Function]}
onFocus={[Function]}
onOpenListClick={[Function]}
onRemoveOption={[Function]}
searchValue=""
selectedOptions={Array []}
singleSelection={false}
toggleButtonRef={[Function]}
updatePosition={[Function]}
value=""
/>
Expand All @@ -168,13 +173,13 @@ exports[`props selectedOptions 1`] = `
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
clearButtonRef={[Function]}
hasSelectedOptions={true}
inputRef={[Function]}
isListOpen={false}
onChange={[Function]}
onClear={[Function]}
onClick={[Function]}
onCloseListClick={[Function]}
onFocus={[Function]}
onOpenListClick={[Function]}
onRemoveOption={[Function]}
Expand All @@ -190,6 +195,7 @@ exports[`props selectedOptions 1`] = `
]
}
singleSelection={false}
toggleButtonRef={[Function]}
updatePosition={[Function]}
value="Mimas, Iapetus"
/>
Expand All @@ -206,13 +212,13 @@ exports[`props singleSelection 1`] = `
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
clearButtonRef={[Function]}
hasSelectedOptions={true}
inputRef={[Function]}
isListOpen={false}
onChange={[Function]}
onClear={[Function]}
onClick={[Function]}
onCloseListClick={[Function]}
onFocus={[Function]}
onOpenListClick={[Function]}
onRemoveOption={[Function]}
Expand All @@ -225,6 +231,7 @@ exports[`props singleSelection 1`] = `
]
}
singleSelection={true}
toggleButtonRef={[Function]}
updatePosition={[Function]}
value="Mimas"
/>
Expand Down
42 changes: 27 additions & 15 deletions src/components/combo_box/combo_box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,29 +150,33 @@ export class EuiComboBox extends Component {
if (amount === -1) {
if (searchInputIndex === 0) {
tabbableItems[tabbableItems.length - 1].focus();
return;
return true;
}
}

// Otherwise tab to the next adjacent item.
tabbableItems[searchInputIndex + amount].focus();
return;
return true;
}

if (document.activeElement === this.clearButton) {
const clearButtonIndex = tabbableItems.indexOf(this.clearButton);
if (document.activeElement === this.toggleButton) {
const toggleButtonIndex = tabbableItems.indexOf(this.toggleButton);

// Wrap to first tabbable if tabbing forwards.
if (amount === 1) {
if (clearButtonIndex === tabbableItems.length - 1) {
if (toggleButtonIndex === tabbableItems.length - 1) {
tabbableItems[0].focus();
return;
return true;
}
}

// Otherwise tab to the next adjacent item.
tabbableItems[clearButtonIndex + amount].focus();
tabbableItems[toggleButtonIndex + amount].focus();
return true;
}

// Tab natively.
return false;
};

incrementActiveOptionIndex = throttle(amount => {
Expand Down Expand Up @@ -321,7 +325,6 @@ export class EuiComboBox extends Component {
|| this.optionsList === event.target
|| this.optionsList && this.optionsList.contains(event.target)
) {
this.onFocus();
return;
}

Expand Down Expand Up @@ -363,12 +366,16 @@ export class EuiComboBox extends Component {
break;

case TAB:
e.preventDefault();
e.stopPropagation();
if (e.shiftKey) {
this.tabAway(-1);
if (this.tabAway(-1)) {
e.preventDefault();
e.stopPropagation();
}
} else {
this.tabAway(1);
if (this.tabAway(1)) {
e.preventDefault();
e.stopPropagation();
}
}
break;
}
Expand Down Expand Up @@ -434,6 +441,10 @@ export class EuiComboBox extends Component {
this.searchInput.focus();
};

onCloseListClick = () => {
this.closeList();
};

onSearchChange = (searchValue) => {
if (this.props.onSearchChange) {
this.props.onSearchChange(searchValue);
Expand Down Expand Up @@ -467,8 +478,8 @@ export class EuiComboBox extends Component {
this.options[index] = node;
};

clearButtonRef = node => {
this.clearButton = node;
toggleButtonRef = node => {
this.toggleButton = node;
};

componentDidMount() {
Expand Down Expand Up @@ -610,9 +621,10 @@ export class EuiComboBox extends Component {
hasSelectedOptions={selectedOptions.length > 0}
isListOpen={isListOpen}
onOpenListClick={this.onOpenListClick}
onCloseListClick={this.onCloseListClick}
singleSelection={singleSelection}
isDisabled={isDisabled}
clearButtonRef={this.clearButtonRef}
toggleButtonRef={this.toggleButtonRef}
/>

{optionsList}
Expand Down
13 changes: 6 additions & 7 deletions src/components/combo_box/combo_box_input/combo_box_input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@ export class EuiComboBoxInput extends Component {
hasSelectedOptions: PropTypes.bool.isRequired,
isListOpen: PropTypes.bool.isRequired,
onOpenListClick: PropTypes.func.isRequired,
onCloseListClick: PropTypes.func.isRequired,
singleSelection: PropTypes.bool,
isDisabled: PropTypes.bool,
clearButtonRef: PropTypes.func,
toggleButtonRef: PropTypes.func,
}

constructor(props) {
Expand Down Expand Up @@ -87,9 +88,10 @@ export class EuiComboBoxInput extends Component {
hasSelectedOptions,
isListOpen,
onOpenListClick,
onCloseListClick,
singleSelection,
isDisabled,
clearButtonRef,
toggleButtonRef,
} = this.props;

const pills = selectedOptions.map((option) => {
Expand Down Expand Up @@ -151,17 +153,14 @@ export class EuiComboBoxInput extends Component {
if (!isDisabled) {
clickProps.clear = {
onClick: hasSelectedOptions ? onClear : undefined,
ref: clearButtonRef,
};
}

const icon = {
type: 'arrowDown',
side: 'right',
onClick: isListOpen && !isDisabled ? undefined : onOpenListClick,
// We want to remove this from the tab order because you can open the combo box by tabbing
// to it already.
tabIndex: '-1',
onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
ref: toggleButtonRef,
};

return (
Expand Down

0 comments on commit 9f5c26c

Please sign in to comment.