Skip to content

Improve behaviour on blur#255

Open
rolftimmermans wants to merge 2 commits intoreact-component:masterfrom
rolftimmermans:patch-1
Open

Improve behaviour on blur#255
rolftimmermans wants to merge 2 commits intoreact-component:masterfrom
rolftimmermans:patch-1

Conversation

@rolftimmermans
Copy link
Copy Markdown

@rolftimmermans rolftimmermans commented Dec 20, 2017

I'm using something similar to the following code. This is one of the examples from https://ant.design/components/select/

<Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={handleChange}
    onFocus={handleFocus}
    onBlur={handleBlur}
    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>

When typing "jack" and then pressing TAB, the dropdown box briefly expands just before closing again.

select-issue-2

This patch fixes that behaviour by setting the open state to closed just before firing the change, instead of afterwards.

I'm using something similar to the following code. This is one of the examples from https://ant.design/components/select/

```
<Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={handleChange}
    onFocus={handleFocus}
    onBlur={handleBlur}
    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>
```

When typing "jack" and then pressing TAB, the dropdown box briefly expands just before closing again.

This patch fixes that behaviour by setting the open state to closed just before firing the change, instead of afterwards.
@codecov-io
Copy link
Copy Markdown

codecov-io commented Dec 20, 2017

Codecov Report

Merging #255 into master will increase coverage by <.01%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #255      +/-   ##
==========================================
+ Coverage   98.95%   98.95%   +<.01%     
==========================================
  Files           8        8              
  Lines         287      288       +1     
  Branches       81       82       +1     
==========================================
+ Hits          284      285       +1     
  Misses          3        3
Impacted Files Coverage Δ
src/Select.jsx 100% <ø> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dade915...69890f4. Read the comment docs.

@yesmeck
Copy link
Copy Markdown
Member

yesmeck commented Dec 22, 2017

Thanks, I'v tried fix this behavior too, but can't reproduce it in test, can you write a test?

Comment thread src/Select.jsx
/* Close dropdown so the unfiltering caused by fireChange()
does not cause the dropdown to animate and expand just
before closing again. */
this.setOpenState(false);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this works? There is already has this.setOpenState(false); at line 397.

@afc163
Copy link
Copy Markdown
Member

afc163 commented Apr 28, 2018

@rolftimmermans

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants