Feat: 303 added closeOnClickInput support

sanusart · Dec 7, 2023 · a2ba33c · a2ba33c
1 parent 41ce2e0
commit a2ba33c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -122,7 +122,8 @@ const options = [
 | valueField                                                                                  | string    | "value"        | Field in data to use for value                                                                                                         |
 | color                                                                                       | string    | "#0074D9"      | Base color to use in component, also can be overwritten via CSS                                                                        |
 | closeOnScroll                                                                               | bool      | false          | If true, scrolling the page will close the dropdown                                                                                    |
-| closeOnSelect                                                                               | bool      | false          | If true, selecting option will close the dropdown                                                                                      |
+| closeOnSelect                                                                               | bool      | false          | If true, selecting option will close the dropdown                  
+| closeOnClickInput                                                                           | bool      | false          | If true, clicking input will close the dropdown if you are not searching.                                                                                      |
 | [dropdownPosition](https://sanusart.github.io/react-dropdown-select/prop/dropdown-position) | string    | "bottom"       | Available options are "auto", "top" and "bottom" defaults to "bottom". Auto will adjust itself according Select's position on the page |
 | keepSelectedInList                                                                          | bool      | true           | If false, selected item will not appear in a list                                                                                      |
 | portal                                                                                      | DOM element | false          | If valid dom element specified - dropdown will break out to render inside the specified element                                        |

diff --git a/docs/src/pages/demo.js b/docs/src/pages/demo.js
@@ -39,6 +39,7 @@ export class Demo extends React.Component {
       color: '#0074D9',
       keepSelectedInList: true,
       closeOnSelect: false,
+      closeOnClickInput: false,
       dropdownPosition: 'bottom',
       direction: 'ltr',
       dropdownHeight: '300px'
@@ -198,6 +199,7 @@ export class Demo extends React.Component {
               onChange={(values) => this.setValues(values)}
               noDataLabel="No matches found"
               closeOnSelect={this.state.closeOnSelect}
+              closeOnClickInput={this.state.closeOnClickInput}
               noDataRenderer={this.state.noDataRenderer ? () => this.noDataRenderer() : undefined}
               dropdownPosition={this.state.dropdownPosition}
               itemRenderer={
@@ -385,6 +387,17 @@ export class Demo extends React.Component {
           />{' '}
           Close dropdown on select/deselect
           <br />
+          <input
+            type="checkbox"
+            checked={this.state.closeOnClickInput}
+            onChange={() =>
+              this.setState({
+                closeOnClickInput: !this.state.closeOnClickInput
+              })
+            }
+          />{' '}
+          Close dropdown on click input
+          <br />
           Custom color{' '}
           <input
             type="color"

diff --git a/src/components/Content.js b/src/components/Content.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
 import Option from './Option';
@@ -14,7 +15,11 @@ const Content = ({ props, state, methods }) => {
       }`}
       onClick={(event) => {
         event.stopPropagation();
-        methods.dropDown('open');
+        if (state.dropdown == true && props.closeOnClickInput && !state.search) {
+          return methods.dropDown('close');
+        } else{
+          return methods.dropDown('open');
+        }
       }}>
       {props.contentRenderer ? (
         props.contentRenderer({ props, state, methods })
@@ -40,6 +45,11 @@ const Content = ({ props, state, methods }) => {
   );
 };
 
+Content.propTypes = {
+  props: PropTypes.object,
+  state: PropTypes.object,
+  methods: PropTypes.object,
+};
 const ContentComponent = styled.div`
   display: flex;
   flex: 1;

diff --git a/src/index.js b/src/index.js
@@ -72,6 +72,10 @@ export class Select extends Component {
      * If true, selecting option will close the dropdown
      */
     closeOnSelect: PropTypes.bool,
+    /**
+     * If true, clicking input will close the dropdown if you are not searching.
+     */
+    closeOnClickInput: PropTypes.bool,
     /**
      * Base color (any css compatible) to use in component, also can be overwritten via CSS
      */

diff --git a/types.d.ts b/types.d.ts
@@ -107,6 +107,7 @@ declare module 'react-dropdown-select' {
     color?: string;
     keepSelectedInList?: boolean;
     closeOnSelect?: boolean;
+    closeOnClickInput?: boolean;
     clearOnBlur?: boolean;
     clearOnSelect?: boolean;
     dropdownPosition?: 'top' | 'bottom' | 'auto';