Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const { active, children } = this.state;
const { intl, onSelect } = this.props;
const selectedTxt = intl.formatMessage({ id: 'Terra.form.select.selected' });
if (keyCode === KeyCode.KEY_UP) {
this.clearScrollTimeout();
this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
this.setState({ active: MenuUtil.findPrevious(children, active) }, this.scrollIntoView);
this.updateCurrentActiveScreenReader();
} else if (keyCode === KeyCode.KEY_DOWN) {
this.clearScrollTimeout();
this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
this.updateCurrentActiveScreenReader();
} else if (keyCode === KeyCode.KEY_RETURN && active !== null) {
event.preventDefault();
this.setState({ closedViaKeyEvent: true });
const option = MenuUtil.findByValue(children, active);
// Handles communicating the case where a clear option is selected to screen readers
if (this.props.clearOptionDisplay) {
const activeOption = this.menu.querySelector('[data-select-active]');
if (activeOption && activeOption.hasAttribute('data-terra-select-clear-option')) {
this.props.visuallyHiddenComponent.current.innerText = intl.formatMessage({ id: 'Terra.form.select.selectCleared' });
}
}
// Handles communicating the case where a regular option is selected to screen readers.
/*
Detecting if browser is not Safari before updating aria-live as there is some odd behaivor
with VoiceOver on desktop, that causes the selected option to be read twice when this is
is added to aria-live container.
onDeselect,
value,
visuallyHiddenComponent,
} = this.props;
if (keyCode === KeyCode.KEY_UP) {
this.clearScrollTimeout();
this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
this.setState({ active: MenuUtil.findPrevious(children, active) }, this.scrollIntoView);
this.updateCurrentActiveScreenReader();
} else if (keyCode === KeyCode.KEY_DOWN) {
this.clearScrollTimeout();
this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
this.updateCurrentActiveScreenReader();
} else if (keyCode === KeyCode.KEY_RETURN && active !== null && !MenuUtil.includes(value, active)) {
event.preventDefault();
const option = MenuUtil.findByValue(children, active);
// Handles communicating the case where a regular option is selected to screen readers.
if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
visuallyHiddenComponent.current.innerHTML = intl.formatMessage({ id: 'Terra.form.select.selectedText' }, { text: option.props.display });
}
if (onSelect) {
onSelect(option.props.value, option);
}
} else if (keyCode === KeyCode.KEY_RETURN && active !== null && MenuUtil.includes(value, active)) {
event.preventDefault();
const option = MenuUtil.findByValue(children, active);
// Handles communicating the case where a regular option is Unselected to screen readers.
visuallyHiddenComponent,
} = this.props;
const selectedTxt = intl.formatMessage({ id: 'Terra.form.select.selected' });
if (keyCode === KeyCode.KEY_UP) {
this.clearScrollTimeout();
this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
this.setState({ active: MenuUtil.findPrevious(children, active) }, this.scrollIntoView);
this.updateCurrentActiveScreenReader();
} else if (keyCode === KeyCode.KEY_DOWN) {
this.clearScrollTimeout();
this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
this.updateCurrentActiveScreenReader();
} else if (keyCode === KeyCode.KEY_RETURN && active !== null) {
event.preventDefault();
this.setState({ closedViaKeyEvent: true });
const option = MenuUtil.findByValue(children, active);
if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
// Handles communicating the case where a clear option is selected to screen readers
if (this.props.clearOptionDisplay) {
const activeOption = this.menu.querySelector('[data-select-active]');
if (activeOption && activeOption.hasAttribute('data-terra-select-clear-option')) {
this.props.visuallyHiddenComponent.current.innerText = intl.formatMessage({ id: 'Terra.form.select.selectCleared' });
}
}
// Handles communicating the case where a regular option is selected to screen readers.
/*
Detecting if browser is not Safari before updating aria-live as there is some odd behaivor
with VoiceOver on desktop, that causes the selected option to be read twice when this is
this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
this.updateCurrentActiveScreenReader();
} else if (keyCode === KeyCode.KEY_RETURN && active !== null && !MenuUtil.includes(value, active)) {
event.preventDefault();
const option = MenuUtil.findByValue(children, active);
// Handles communicating the case where a regular option is selected to screen readers.
if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
visuallyHiddenComponent.current.innerHTML = intl.formatMessage({ id: 'Terra.form.select.selectedText' }, { text: option.props.display });
}
if (onSelect) {
onSelect(option.props.value, option);
}
} else if (keyCode === KeyCode.KEY_RETURN && active !== null && MenuUtil.includes(value, active)) {
event.preventDefault();
const option = MenuUtil.findByValue(children, active);
// Handles communicating the case where a regular option is Unselected to screen readers.
if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
visuallyHiddenComponent.current.innerHTML = intl.formatMessage({ id: 'Terra.form.select.unselectedText' }, { text: option.props.display });
}
if (onDeselect) {
onDeselect(option.props.value, option);
}
} else if (keyCode === KeyCode.KEY_HOME) {
event.preventDefault();
this.setState({ active: MenuUtil.findFirst(children) });
} else if (keyCode === KeyCode.KEY_END) {
event.preventDefault();
handleKeyDown(event) {
// Add active state to FF browsers
if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
this.setState({ active: true });
}
// Add focus styles for keyboard navigation
if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE || event.nativeEvent.keyCode === KeyCode.KEY_RETURN) {
this.setState({ focused: true });
event.preventDefault();
this.handleOnClick(event);
}
}
handleKeyDown(event) {
if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
const { onSelect } = this.props;
if (onSelect) {
event.preventDefault();
onSelect(this.props.sectionId, this.props.rowId, this.props.columnId);
}
}
}
return (event) => {
if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
event.preventDefault();
if (Number.isNaN(Number(index))) {
this.props.onPageChange(event.currentTarget.attributes['aria-label'].value);
return false;
}
this.props.onPageChange(index);
this.setState({
selectedPage: index,
pageSequence: pageSet(index, calculatePages(this.props.totalCount, this.props.itemCountPerPage)),
});
}
return false;
handlePrimaryKeyDown(event) {
if (event.keyCode === KeyCode.KEY_SPACE || event.keyCode === KeyCode.KEY_RETURN) {
this.setState({ primaryIsActive: true });
}
}
return ((event) => {
if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
this.setState({ isActive: false });
}
if (onKeyUp) {
onKeyUp(event);
}
});
}
return ((event) => {
const shiftTabClicked = (event.shiftKey && event.nativeEvent.keyCode === KeyCode.KEY_TAB);
const tabClicked = (event.nativeEvent.keyCode === KeyCode.KEY_TAB);
if (!(shiftTabClicked || tabClicked)) {
event.preventDefault();
}
if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
if (item.props.subMenuItems && item.props.subMenuItems.length > 0) {
this.props.onRequestNext(item);
}
} else if (event.nativeEvent.keyCode === KeyCode.KEY_RIGHT) {
if (item.props.subMenuItems && item.props.subMenuItems.length > 0) {
this.props.onRequestNext(item);
}
} else if (event.nativeEvent.keyCode === KeyCode.KEY_LEFT) {
this.props.onRequestBack();
} else if (event.nativeEvent.keyCode === KeyCode.KEY_UP) {
this.setState({ focusIndex: index - 1 });
} else if (event.nativeEvent.keyCode === KeyCode.KEY_DOWN) {
this.setState({ focusIndex: index + 1 });
}
if (onKeyDown) {