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 3 commits
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
9 changes: 9 additions & 0 deletions docs/app/Examples/modules/Dropdown/Usage/DropdownExampleCloseOnBlur.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react'
import { Dropdown } from 'semantic-ui-react'
import { friendOptions } from '../common'

const DropdownExampleCloseOnBlur = () => (
<Dropdown placeholder='Select Friend' closeOnBlur 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.

How about we show both true/false cases for comparison?

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

)

export default DropdownExampleCloseOnBlur
9 changes: 9 additions & 0 deletions docs/app/Examples/modules/Dropdown/Usage/DropdownExampleOpenOnFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react'
import { Dropdown } from 'semantic-ui-react'
import { friendOptions } from '../common'

const DropdownExampleOpenOnFocus = () => (
<Dropdown placeholder='Select Friend' 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.

Let's show both cases here as well.

)

export default DropdownExampleOpenOnFocus
12 changes: 12 additions & 0 deletions docs/app/Examples/modules/Dropdown/Usage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,18 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

const DropdownUsageExamples = () => (
<ExampleSection title='Usage'>
<ComponentExample
title='Open On Focus'
description='A dropdown that opens when it is focussed on.'
examplePath='modules/Dropdown/Usage/DropdownExampleOpenOnFocus'
/>

<ComponentExample
title='Close On Blur'
description='A dropdown that closes when it blurs'
examplePath='modules/Dropdown/Usage/DropdownExampleCloseOnBlur'
/>

<ComponentExample
title='Uncontrolled'
description='A dropdown can behave like an uncontrolled input.'
Expand Down
10 changes: 6 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 @@ -403,7 +403,9 @@ export default class Dropdown extends Component {
if (!prevState.focus && this.state.focus) {
debug('dropdown focused')
if (!this.isMouseDown) {
const { openOnFocus } = this.props
debug('mouse is not down, opening')
if (!openOnFocus) return
Copy link
Member

Choose a reason for hiding this comment

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

Small syntactical change request: if (openOnFocus) this.open(), since there is an explicit 1:1 correlation between the condition and the action in this case.

this.open()
}
if (!this.state.open) {
Expand All @@ -417,7 +419,9 @@ export default class Dropdown extends Component {
} else if (prevState.focus && !this.state.focus) {
debug('dropdown blurred')
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
Copy link
Member

Choose a reason for hiding this comment

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

Same here: if (closeOnBlur) this.close().

this.close()
}
document.removeEventListener('keydown', this.openOnArrow)
Expand Down Expand Up @@ -919,9 +923,8 @@ export default class Dropdown extends Component {
open = (e) => {
debug('open()')

const { disabled, onOpen, search, openOnFocus } = this.props
const { disabled, onOpen, search } = this.props
if (disabled) return
if (!openOnFocus) return
if (search && this._search) this._search.focus()
if (onOpen) onOpen(e, this.props)

Expand All @@ -931,8 +934,7 @@ export default class Dropdown extends Component {
close = (e) => {
debug('close()')

const { onClose, closeOnBlur } = this.props
if (!closeOnBlur) return
const { onClose } = this.props
if (onClose) onClose(e, this.props)

this.trySetState({ open: false })
Expand Down