Skip to content

Commit

Permalink
fix(select): calls provided onBlur function (uber#3148)
Browse files Browse the repository at this point in the history 
* fix(select): adds failing test

* fix(Select): calls provided onBlur fn

* fix(select): update snaps

* test(vrt): update visual snapshots for 40b750c [skip ci] (uber#3149)

Co-authored-by: UberOpenSourceBot <[email protected]>

Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: UberOpenSourceBot <[email protected]>
  • Loading branch information
@chasestarr @UberOpenSourceBot
3 people authored Mar 31, 2020
1 parent 0792c09 commit b7399a0
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 33 deletions.
28 changes: 12 additions & 16 deletions src/select/__tests__/__snapshots__/select.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ exports[`Select component renders component in search mode and false for multipl
aria-haspopup="true"
data-baseweb="select"
key="popover-anchor"
onBlur={[Function]}
onClick={[Function]}
>
<MockStyledComponent
Expand Down Expand Up @@ -217,13 +218,15 @@ exports[`Select component renders component in search mode and false for multipl
</div>,
}
}
onBlur={[Function]}
onClick={[Function]}
>
<div
aria-controls={null}
aria-expanded="false"
aria-haspopup="true"
data-baseweb="select"
onBlur={[Function]}
onClick={[Function]}
styled-component="true"
test-style={
Expand Down Expand Up @@ -560,7 +563,6 @@ exports[`Select component renders component in search mode and false for multipl
disabled={null}
id={null}
inputRef={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
overrides={
Expand Down Expand Up @@ -603,7 +605,6 @@ exports[`Select component renders component in search mode and false for multipl
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down Expand Up @@ -642,7 +643,6 @@ exports[`Select component renders component in search mode and false for multipl
disabled={null}
forwardedRef={[Function]}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand All @@ -664,7 +664,6 @@ exports[`Select component renders component in search mode and false for multipl
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down Expand Up @@ -971,6 +970,7 @@ exports[`Select component renders component in search mode and true for multiple
aria-haspopup="true"
data-baseweb="select"
key="popover-anchor"
onBlur={[Function]}
onClick={[Function]}
>
<MockStyledComponent
Expand Down Expand Up @@ -1065,13 +1065,15 @@ exports[`Select component renders component in search mode and true for multiple
</div>,
}
}
onBlur={[Function]}
onClick={[Function]}
>
<div
aria-controls={null}
aria-expanded="false"
aria-haspopup="true"
data-baseweb="select"
onBlur={[Function]}
onClick={[Function]}
styled-component="true"
test-style={
Expand Down Expand Up @@ -1408,7 +1410,6 @@ exports[`Select component renders component in search mode and true for multiple
disabled={null}
id={null}
inputRef={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
overrides={
Expand Down Expand Up @@ -1451,7 +1452,6 @@ exports[`Select component renders component in search mode and true for multiple
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down Expand Up @@ -1490,7 +1490,6 @@ exports[`Select component renders component in search mode and true for multiple
disabled={null}
forwardedRef={[Function]}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand All @@ -1512,7 +1511,6 @@ exports[`Select component renders component in search mode and true for multiple
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down Expand Up @@ -1819,6 +1817,7 @@ exports[`Select component renders component in select mode and false for multipl
aria-haspopup="true"
data-baseweb="select"
key="popover-anchor"
onBlur={[Function]}
onClick={[Function]}
>
<MockStyledComponent
Expand Down Expand Up @@ -1907,13 +1906,15 @@ exports[`Select component renders component in select mode and false for multipl
</div>,
}
}
onBlur={[Function]}
onClick={[Function]}
>
<div
aria-controls={null}
aria-expanded="false"
aria-haspopup="true"
data-baseweb="select"
onBlur={[Function]}
onClick={[Function]}
styled-component="true"
test-style={
Expand Down Expand Up @@ -2148,7 +2149,6 @@ exports[`Select component renders component in select mode and false for multipl
disabled={null}
id={null}
inputRef={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
overrides={
Expand Down Expand Up @@ -2191,7 +2191,6 @@ exports[`Select component renders component in select mode and false for multipl
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down Expand Up @@ -2230,7 +2229,6 @@ exports[`Select component renders component in select mode and false for multipl
disabled={null}
forwardedRef={[Function]}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand All @@ -2252,7 +2250,6 @@ exports[`Select component renders component in select mode and false for multipl
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down Expand Up @@ -2690,6 +2687,7 @@ exports[`Select component renders component in select mode and true for multiple
aria-haspopup="true"
data-baseweb="select"
key="popover-anchor"
onBlur={[Function]}
onClick={[Function]}
>
<MockStyledComponent
Expand Down Expand Up @@ -2778,13 +2776,15 @@ exports[`Select component renders component in select mode and true for multiple
</div>,
}
}
onBlur={[Function]}
onClick={[Function]}
>
<div
aria-controls={null}
aria-expanded="false"
aria-haspopup="true"
data-baseweb="select"
onBlur={[Function]}
onClick={[Function]}
styled-component="true"
test-style={
Expand Down Expand Up @@ -3019,7 +3019,6 @@ exports[`Select component renders component in select mode and true for multiple
disabled={null}
id={null}
inputRef={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
overrides={
Expand Down Expand Up @@ -3062,7 +3061,6 @@ exports[`Select component renders component in select mode and true for multiple
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down Expand Up @@ -3101,7 +3099,6 @@ exports[`Select component renders component in select mode and true for multiple
disabled={null}
forwardedRef={[Function]}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand All @@ -3123,7 +3120,6 @@ exports[`Select component renders component in select mode and true for multiple
aria-required={null}
disabled={null}
id={null}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
required={null}
Expand Down
44 changes: 44 additions & 0 deletions src/select/__tests__/select-calls-provided-blur.e2e.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*
Copyright (c) 2018-2020 Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/* global document */
/* eslint-env node */
/* eslint-disable flowtype/require-valid-file-annotation */

const {mount} = require('../../../e2e/helpers');

const SELECT_INPUT = 'div[data-baseweb="select"] input';

function getActiveTag(page) {
return page.evaluate(() => {
const el = document.activeElement;
if (el) {
return el.tagName;
}
});
}

describe('select option click returns focus', () => {
it('calls provided blur function when another element is focused', async () => {
await mount(page, 'select-calls-provided-blur');
await page.waitFor(SELECT_INPUT);

const input = await page.$(SELECT_INPUT);
await input.click();

const beforeActiveTag = await getActiveTag(page);
expect(beforeActiveTag).toBe('INPUT');

await page.keyboard.press('Tab');

const afterActiveTag = await getActiveTag(page);
expect(afterActiveTag).toBe('BUTTON');

const p = await page.$('p');
const blurCount = await page.evaluate(el => el.textContent, p);
expect(blurCount).toBe('1');
});
});
30 changes: 30 additions & 0 deletions src/select/__tests__/select-calls-provided-blur.scenario.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/*
Copyright (c) 2018-2020 Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @flow

import React from 'react';

import {StatefulSelect} from '../index.js';

export default function Scenario() {
const [blurCount, setBlurCount] = React.useState(0);
return (
<React.Fragment>
<StatefulSelect
closeOnSelect={false}
onBlur={() => setBlurCount(prev => prev + 1)}
options={[
{id: 'a', label: 'hey!'},
{id: 'b', label: 'are you listening?'},
{id: 'c', label: 'look at me!'},
]}
/>
<button>focus target</button>
<p>{blurCount}</p>
</React.Fragment>
);
}
41 changes: 24 additions & 17 deletions src/select/select-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,27 +281,31 @@ class Select extends React.Component<PropsT, SelectStateT> {
this.openAfterFocus = false;
};

handleBlur = (event: Event) => {
if (containsNode(this.anchor.current, event.target)) {
return;
handleBlur = (event: FocusEvent | MouseEvent) => {
if (event.relatedTarget) {
if (
containsNode(this.anchor.current, event.relatedTarget) ||
containsNode(this.dropdown.current, event.relatedTarget)
) {
return;
}
} else {
if (containsNode(this.anchor.current, event.target)) {
return;
}
}

if (this.props.onBlur) {
this.props.onBlur(event);
}

const onBlurredState: $Shape<SelectStateT> = {
isFocused: false,
isOpen: false,
isPseudoFocused: false,
};

if (this.props.onBlurResetsInput) {
onBlurredState.inputValue = '';
}

if (this.isMounted) {
this.setState(onBlurredState);
this.setState({
isFocused: false,
isOpen: false,
isPseudoFocused: false,
inputValue: this.props.onBlurResetsInput ? '' : this.state.inputValue,
});
}

if (__BROWSER__) {
Expand Down Expand Up @@ -687,7 +691,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
aria-labelledby={this.props['aria-labelledby']}
aria-owns={this.state.isOpen ? this.listboxId : null}
aria-required={this.props.required || null}
onBlur={this.handleBlur}
onFocus={this.handleInputFocus}
ref={ref => (this.input = ref)}
tabIndex={0}
Expand All @@ -714,7 +717,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
disabled={this.props.disabled || null}
id={this.props.id || null}
inputRef={ref => (this.input = ref)}
onBlur={this.handleBlur}
onChange={this.handleInputChange}
onFocus={this.handleInputFocus}
overrides={{Input: overrides.Input}}
Expand Down Expand Up @@ -1023,7 +1025,12 @@ class Select extends React.Component<PropsT, SelectStateT> {
placement={PLACEMENT.bottom}
{...popoverProps}
>
<Root data-baseweb="select" {...sharedProps} {...rootProps}>
<Root
onBlur={this.handleBlur}
data-baseweb="select"
{...sharedProps}
{...rootProps}
>
<ControlContainer
onKeyDown={this.handleKeyDown}
onClick={this.handleClick}
Expand Down
Binary file added vrt/__image_snapshots__/select-calls-provided-blur__dark-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added vrt/__image_snapshots__/select-calls-provided-blur__desktop-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added vrt/__image_snapshots__/select-calls-provided-blur__mobile-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b7399a0

Please sign in to comment.