@@ -45,6 +45,8 @@ export interface Option { | |||
} | |||
export default class ProjectsSortingSelect extends React.PureComponent<Props> { | |||
sortOrderButtonNode: HTMLElement | null = null; | |||
getSorting = () => { | |||
const options = this.getOptions(); | |||
const { sortDesc, sortValue } = parseSorting(this.props.selectedSort); | |||
@@ -65,6 +67,9 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> { | |||
handleDescToggle = () => { | |||
const { sortDesc, sortValue } = parseSorting(this.props.selectedSort); | |||
this.props.onChange(sortValue, !sortDesc); | |||
if (this.sortOrderButtonNode) { | |||
this.sortOrderButtonNode.focus(); | |||
} | |||
}; | |||
handleSortChange = (option: Option) => { | |||
@@ -113,7 +118,10 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> { | |||
} | |||
className="js-projects-sorting-invert spacer-left" | |||
color={colors.gray52} | |||
onClick={this.handleDescToggle}> | |||
onClick={this.handleDescToggle} | |||
innerRef={sortButtonRef => { | |||
this.sortOrderButtonNode = sortButtonRef; | |||
}}> | |||
{sortDesc ? <SortDescIcon className="" /> : <SortAscIcon className="" />} | |||
</ButtonIcon> | |||
</Tooltip> |
@@ -79,6 +79,14 @@ it('reverses sorting', () => { | |||
const wrapper = shallowRender({ selectedSort: '-size', onChange }); | |||
click(wrapper.find('ButtonIcon')); | |||
expect(onChange).toBeCalledWith('size', false); | |||
const node = document.createElement('div'); | |||
node.focus = jest.fn(); | |||
wrapper.instance().sortOrderButtonNode = node; | |||
click(wrapper.find('ButtonIcon')); | |||
expect(node.focus).toBeCalled(); | |||
}); | |||
function shallowRender(overrides: Partial<ProjectsSortingSelect['props']> = {}) { |
@@ -77,6 +77,7 @@ exports[`should handle the descending sort direction 1`] = ` | |||
aria-label="projects.sort_descending" | |||
className="js-projects-sorting-invert spacer-left" | |||
color="#525252" | |||
innerRef={[Function]} | |||
onClick={[Function]} | |||
> | |||
<SortDescIcon | |||
@@ -171,6 +172,7 @@ exports[`should render correctly for leak view 1`] = ` | |||
aria-label="projects.sort_ascending" | |||
className="js-projects-sorting-invert spacer-left" | |||
color="#525252" | |||
innerRef={[Function]} | |||
onClick={[Function]} | |||
> | |||
<SortAscIcon | |||
@@ -265,6 +267,7 @@ exports[`should render correctly for overall view 1`] = ` | |||
aria-label="projects.sort_ascending" | |||
className="js-projects-sorting-invert spacer-left" | |||
color="#525252" | |||
innerRef={[Function]} | |||
onClick={[Function]} | |||
> | |||
<SortAscIcon |