feat(Dropdown): add allowReselection prop

docs/src/examples/modules/Dropdown/Usage/DropdownExampleAllowReselection.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const options = [
+ { key: 'English', text: 'English', value: 'English' },
+ { key: 'French', text: 'French', value: 'French' },
+ { key: 'Spanish', text: 'Spanish', value: 'Spanish' },
+ { key: 'German', text: 'German', value: 'German' },
+ { key: 'Chinese', text: 'Chinese', value: 'Chinese' },
+]
+
+class DropdownExampleAllowReselection extends Component {
+ state = { options }
+
+ handleAddition = (e, { value }) => {
+ this.setState((prevState) => ({
+ options: [{ text: value, value }, ...prevState.options],
+ }))
+ }
+
+ handleChange = (e, { value }) => this.setState({ currentValue: value })
+
+ render() {
+ const { currentValue } = this.state
+
+ return (
+ <Dropdown
+ options={this.state.options}
+ placeholder='Choose Language'
+ search
+ selection
+ fluid
+ allowReselection
+ value={currentValue}
+ onAddItem={this.handleAddition}
+ onChange={this.handleChange}
+ />
+ )
+ }
+}
+
+export default DropdownExampleAllowReselection

docs/src/examples/modules/Dropdown/Usage/index.js

@@ -77,6 +77,11 @@ const DropdownUsageExamples = () => (
  description='Or provide additionLabel as a component.'
  examplePath='modules/Dropdown/Usage/DropdownExampleAdditionLabelComponent'
  />
+ <ComponentExample
+ title='Allow Reselection'
+ description='Using allowReselection to trigger onChange events even when reselecting same value.'
+ examplePath='modules/Dropdown/Usage/DropdownExampleAllowReselection'
+ />
  <ComponentExample
  title='Trigger'
  description='A dropdown can render a node in place of the text.'

src/modules/Dropdown/Dropdown.d.ts

@@ -28,6 +28,11 @@ export interface StrictDropdownProps {
  */
  allowAdditions?: boolean
 
+ /**
+ * Allow user to trigger onChange events even when reselecting same value.
+ */
+ allowReselection?: boolean
+
  /** A Dropdown can reduce its complexity. */
  basic?: boolean
 

src/modules/Dropdown/Dropdown.js

@@ -278,7 +278,7 @@ class DropdownInner extends Component {
  }
  }
 
- makeSelectedItemActive = (e, selectedIndex) => {
+ makeSelectedItemActive = (e, selectedIndex, allowReselection) => {
  const { open, value } = this.state
  const { multiple } = this.props
 
@@ -297,7 +297,8 @@ class DropdownInner extends Component {
  const newValue = multiple ? _.union(value, [selectedValue]) : selectedValue
  const valueHasChanged = multiple ? !!_.difference(newValue, value).length : newValue !== value
 
- if (valueHasChanged) {
+ // when use allowReselection then can be select same value
+ if (allowReselection || valueHasChanged) {
  // notify the onChange prop that the user is trying to change value
  this.setState({ value: newValue })
  this.handleChange(e, newValue)
@@ -314,7 +315,7 @@ class DropdownInner extends Component {
 
  selectItemOnEnter = (e) => {
  debug('selectItemOnEnter()', keyboardKey.getKey(e))
- const { search } = this.props
+ const { search, allowReselection = false } = this.props
  const { open, selectedIndex } = this.state
 
  if (!open) {
@@ -351,7 +352,7 @@ class DropdownInner extends Component {
  return
  }
 
- const nextValue = this.makeSelectedItemActive(e, selectedIndex)
+ const nextValue = this.makeSelectedItemActive(e, selectedIndex, allowReselection)
 
  // This is required as selected value may be the same
  this.setState({
@@ -464,7 +465,7 @@ class DropdownInner extends Component {
  }
  }
 
- handleItemClick = (e, item) => {
+ handleItemClick = (e, item, allowReselection) => {
  debug('handleItemClick()', item)
 
  const { multiple, search } = this.props
@@ -489,7 +490,8 @@ class DropdownInner extends Component {
  : newValue !== currentValue
 
  // notify the onChange prop that the user is trying to change value
- if (valueHasChanged) {
+ // when use allowReselection then can be select same value
+ if (allowReselection || valueHasChanged) {
  this.setState({ value: newValue })
  this.handleChange(e, newValue)
  }
@@ -522,8 +524,6 @@ class DropdownInner extends Component {
  }
 
  handleBlur = (e) => {
- debug('handleBlur()')
-
  // Heads up! Don't remove this.
  // https://github.com/Semantic-Org/Semantic-UI-React/issues/1315
  const currentTarget = _.get(e, 'currentTarget')
@@ -956,7 +956,7 @@ class DropdownInner extends Component {
  }
 
  renderOptions = () => {
- const { lazyLoad, multiple, search, noResultsMessage } = this.props
+ const { lazyLoad, multiple, search, noResultsMessage, allowReselection = false } = this.props
  const { open, selectedIndex, value } = this.state
 
  // lazy load, only render options when open
@@ -998,7 +998,7 @@ class DropdownInner extends Component {
  overrideProps: (predefinedProps) => ({
  onClick: (e, item) => {
  predefinedProps.onClick?.(e, item)
- this.handleItemClick(e, item)
+ this.handleItemClick(e, item, allowReselection)
  },
  }),
  },
@@ -1143,6 +1143,11 @@ Dropdown.propTypes = {
  PropTypes.bool,
  ]),
 
+ /**
+ * Allow user to trigger onChange events even when reselecting same value.
+ */
+ allowReselection: PropTypes.bool,
+
  /** A Dropdown can reduce its complexity. */
  basic: PropTypes.bool,