Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Dropdown): add openOnFocus and closeOnBlur #1101

Merged
merged 10 commits into from
Jan 11, 2017
Merged

feat(Dropdown): add openOnFocus and closeOnBlur #1101

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
510afda
feat(Dropdown): added two more props to Dropdown component
tarang9211 Dec 31, 2016
a0a5963
feat(Dropdown): added descriptions for openOnFocus and closeOnBlur props
tarang9211 Jan 1, 2017
e23854e
feat(Dropdown): added closeOnBlur and openOnFocus to default props
tarang9211 Jan 1, 2017
69aeee2
feat(Dropdown): fixed minor eslint error
tarang9211 Jan 1, 2017
35bd319
feat(Dropdown): added logic to open & close functions for openOnFocus…
tarang9211 Jan 1, 2017
33fcd85
feat(Dropdown): modified componentDidUpdate to handle new prop behavior
tarang9211 Jan 8, 2017
eac7c8f
feat(Dropdown): added example for openOnFocus prop to docs site
tarang9211 Jan 9, 2017
f08de41
feat(Dropdown): added closeOnBlur example to Dropdown docs site
tarang9211 Jan 9, 2017
23f389f
feat(Dropdown): fixed minor syntax changes, added more examples for o…
tarang9211 Jan 10, 2017
b002a52
feat(Dropdown): removed fluid props from dropdown docs site, and adde…
tarang9211 Jan 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/app/Examples/modules/Dropdown/Usage/DropdownExampleCloseOnBlur.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import { Dropdown } from 'semantic-ui-react'
import { friendOptions } from '../common'

const DropdownExampleCloseOnBlur = () => (
<Dropdown placeholder='Select Friend' closeOnBlur fluid selection options={friendOptions} />
<div>
<Dropdown placeholder='I close on blur' closeOnBlur fluid selection options={friendOptions} />
<br />
Copy link
Member

Choose a reason for hiding this comment

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

Let's drop the fluid prop and go with {' '} here so these are inline elements rather than full page vertically stacked elements. Just helps keep the docs more concise.

<Dropdown placeholder='I stay open on blur' closeOnBlur={false} fluid selection options={friendOptions} />
</div>
)

export default DropdownExampleCloseOnBlur
6 changes: 5 additions & 1 deletion docs/app/Examples/modules/Dropdown/Usage/DropdownExampleOpenOnFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import { Dropdown } from 'semantic-ui-react'
import { friendOptions } from '../common'

const DropdownExampleOpenOnFocus = () => (
<Dropdown placeholder='Select Friend' openOnFocus fluid selection options={friendOptions} />
<div>
<Dropdown placeholder='I stay open on focus' openOnFocus fluid selection options={friendOptions} />
Copy link
Member

Choose a reason for hiding this comment

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

-I stay open on focus
+I open on focus

<br />
<Dropdown placeholder='I close when not focussed' openOnFocus={false} fluid selection options={friendOptions} />
Copy link
Member

Choose a reason for hiding this comment

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

-I close when not focussed
+I do not open on focus

</div>
)

export default DropdownExampleOpenOnFocus
6 changes: 2 additions & 4 deletions src/modules/Dropdown/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,8 +405,7 @@ export default class Dropdown extends Component {
if (!this.isMouseDown) {
const { openOnFocus } = this.props
debug('mouse is not down, opening')
if (!openOnFocus) return
this.open()
if (openOnFocus) this.open()
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Does this line look fine to you, logically?

Copy link
Member

Choose a reason for hiding this comment

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

👍

}
if (!this.state.open) {
document.addEventListener('keydown', this.openOnArrow)
Expand All @@ -421,8 +420,7 @@ export default class Dropdown extends Component {
if (!this.isMouseDown) {
Copy link

Choose a reason for hiding this comment

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

Hey guys I know I'm late to the party. I wanted to discuss this line with you. So I'm doing a search Dropdown and I don't want it to open on focus. This works fine while tabbing through the form, but clicking on a form field is also focusing on it, yet it'll still open.

It makes sense that the menu opens if you click on the arrow, but I think for search it's a bit unintuitive if it opens when one clicks on the input.

Thoughts?

const { closeOnBlur } = this.props
debug('mouse is not down, closing')
if (!closeOnBlur) return
this.close()
if (closeOnBlur) this.close()
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Does this line look fine to you, logically?

Copy link
Member

Choose a reason for hiding this comment

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

👍

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Alright, hmm. I'm seeing something weird. When I go to the dropdown with closeOnBlur being true, and tab out of it to the adjacent one, the first one closes. It shouldn't right?

}
document.removeEventListener('keydown', this.openOnArrow)
document.removeEventListener('keydown', this.openOnSpace)
Expand Down