FIX (usage in form): add requered prop and pattern, closes #59

README.md

@@ -69,6 +69,8 @@ and use as:
 | clearOnBlur                                                                                 | bool        | true           | If true, and `searchable`, search value will be cleared on blur                                                                        |
 | clearOnSelect                                                                               | bool        | true           | If true, and `searchable`, search value will be cleared upon value select/de-select                                                    |
 | name                                                                                        | string      | null           | If set, input type hidden would be added in the component with the value of the `name` prop as name and select's `values` as value     |
+| required                                                                                    | bool        | false          | If set, input type hidden would be added in the component with `required` prop as true/false                                           |
+| pattern                                                                                     | string      | null           | If set, input type hidden would be added in the component with `pattern` prop as regex                                                 |
 | dropdownGap                                                                                 | number      | 5              | Gap between select element and dropdown                                                                                                |
 | multi                                                                                       | bool        | false          | If true - will act as multi-select, if false - only one option will be selected at the time                                            |
 | placeholder                                                                                 | string      | "Select..."    | Placeholder shown where there are no selected values                                                                                   |

__tests__/__snapshots__/index.spec.js.snap

@@ -576,7 +576,15 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
     </div>
     <input
       name="form-select"
-      type="hidden"
+      pattern={false}
+      required={false}
+      style={
+        Object {
+          "opacity": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
       value={Array []}
     />
     <div

docs/src/examples/Form.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Heading } from './components/Heading';
+import Select from '../../../src';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import theme from 'prism-react-renderer/themes/github';
+
+const code = `<form>
+  <Select
+    options={options}
+    values={[]}
+    required
+    multi
+    name="select"
+    onChange={(value) => console.log(value)}
+  />
+  <button>Send</button>
+</form>`;
+
+const Form = ({ options, title }) => (
+  <React.Fragment>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Form.js"
+    />
+
+    <LiveProvider theme={theme} code={code} scope={{ Select, options }}>
+      <LiveEditor />
+      <br />
+      <LiveError />
+      <LivePreview />
+    </LiveProvider>
+  </React.Fragment>
+);
+
+Form.propTypes = {};
+
+const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+
+export default Form;

docs/src/pages/api.md

@@ -15,6 +15,8 @@ title: 'API'
 | clearOnBlur                                                                                 | bool        | true           | If true, and `searchable`, search value will be cleared on blur                                                                        |
 | clearOnSelect                                                                               | bool        | true           | If true, and `searchable`, search value will be cleared upon value select/de-select                                                    |
 | name                                                                                        | string      | null           | If set, input type hidden would be added in the component with the value of the `name` prop as name and select's `values` as value     |
+| required                                                                                    | bool        | false          | If set, input type hidden would be added in the component with `required` prop as true/false                                           |
+| pattern                                                                                     | string      | null           | If set, input type hidden would be added in the component with `pattern` prop as regex                                                 |
 | dropdownGap                                                                                 | number      | 5              | Gap between select element and dropdown                                                                                                |
 | multi                                                                                       | bool        | false          | If true - will act as multi-select, if false - only one option will be selected at the time                                            |
 | placeholder                                                                                 | string      | "Select..."    | Placeholder shown where there are no selected values                                                                                   |

docs/src/pages/examples.js

@@ -12,6 +12,7 @@ import '../styles.css';
 import { options } from '../options';
 
 import Basic from '../examples/Basic';
+import Form from '../examples/Form';
 import Windowed from '../examples/Windowed';
 import Multi from '../examples/Multi';
 import OpenOnTop from '../examples/OpenOnTop';
@@ -40,6 +41,10 @@ const Examples = () => (
       <Basic options={demoOptions} title="Basic (using react-live)" />
     </Wrapper>
 
+    <Wrapper>
+      <Form options={demoOptions} title="Form with validation (using react-live)" />
+    </Wrapper>
+
     <Wrapper>
       <Multi options={demoOptions} title="Multi" />
     </Wrapper>

src/index.js

@@ -50,7 +50,10 @@ export class Select extends Component {
     clearRenderer: PropTypes.func,
     separatorRenderer: PropTypes.func,
     dropdownHandleRenderer: PropTypes.func,
-    direction: PropTypes.string
+    direction: PropTypes.string,
+    required: PropTypes.bool,
+    pattern: PropTypes.string,
+    name: PropTypes.string
   };
 
   constructor(props) {
@@ -453,8 +456,14 @@ export class Select extends Component {
           {...this.props.additionalProps}>
           <Content props={this.props} state={this.state} methods={this.methods} />
 
-          {this.props.name && (
-            <input name={this.props.name} type="hidden" value={this.props.values} />
+          {(this.props.name || this.props.required) && (
+            <input
+              style={{ opacity: 0, width: 0, position: 'absolute' }}
+              name={this.props.name}
+              required={this.props.required}
+              pattern={this.props.pattern}
+              value={this.state.values}
+            />
           )}
 
           {this.props.loading && <Loading props={this.props} />}
@@ -517,6 +526,8 @@ Select.defaultProps = {
   create: false,
   direction: 'ltr',
   name: null,
+  required: false,
+  pattern: false,
   onChange: () => undefined,
   onDropdownOpen: () => undefined,
   onDropdownClose: () => undefined,

types.d.ts

@@ -86,6 +86,8 @@ export interface ISelectProps<T extends object = object> {
   create?: boolean;
   direction?: 'ltr' | 'rtl';
   name?: string;
+	required?: boolean,
+	pattern?: string,
   onChange: (value: any) => void;
   onDropdownOpen?: () => void;
   onDropdownClose?: () => void;