Fixed #1331, Fixed #1332, Fixed #1306

primefaces · Apr 16, 2020 · fb10bc5 · fb10bc5
1 parent b6b9e21
commit fb10bc5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 2 deletions.
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -637,7 +637,7 @@ export class Dropdown extends Component {
     }
 
     checkValidity() {
-        return this.nativeSelect.checkValidity;
+        return this.nativeSelect.checkValidity();
     }
 
     componentDidMount() {

diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -3,6 +3,7 @@ import TooltipOptions from '../tooltip/TooltipOptions';
 
 interface MultiSelectProps {
     id?: string;
+    name?: string;
     value?: any;
     options?: any[];
     optionLabel?: string;
@@ -19,6 +20,8 @@ interface MultiSelectProps {
     filterPlaceholder?: string;
     tabIndex?: boolean;
     dataKey?: string;
+    inputId?: string;
+    required?: boolean;
     appendTo?: HTMLElement;
     tooltip?: any;
     tooltipOptions?: TooltipOptions;

diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
@@ -13,6 +13,7 @@ export class MultiSelect extends Component {
 
     static defaultProps = {
         id: null,
+        name: null,
         value: null,
         options: null,
         optionLabel: null,
@@ -29,6 +30,8 @@ export class MultiSelect extends Component {
         filterPlaceholder: null,
         tabIndex: '0',
         dataKey: null,
+        inputId: null,
+        required: false,
         appendTo: null,
         tooltip: null,
         tooltipOptions: null,
@@ -44,6 +47,7 @@ export class MultiSelect extends Component {
 
     static propTypes = {
         id: PropTypes.string,
+        name: PropTypes.string,
         value: PropTypes.any,
         options: PropTypes.array,
         optionLabel: PropTypes.string,
@@ -60,6 +64,8 @@ export class MultiSelect extends Component {
         filterPlaceholder: PropTypes.string,
         tabIndex: PropTypes.string,
         dataKey: PropTypes.string,
+        inputId: PropTypes.string,
+        required: PropTypes.bool,
         appendTo: PropTypes.object,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
@@ -384,6 +390,10 @@ export class MultiSelect extends Component {
         return !this.props.value || this.props.value.length === 0;
     }
 
+    checkValidity() {
+        return this.nativeSelect.checkValidity();
+    }
+
     getSelectedItemsLabel() {
         let pattern = /{(.*?)}/;
         if (pattern.test(this.props.selectedItemsLabel)) {
@@ -469,9 +479,22 @@ export class MultiSelect extends Component {
         );
     }
 
+    renderHiddenSelect() {
+        let selectedOptions = this.props.value ? this.props.value.map((option,index) => <option key={this.getOptionLabel(option) + '_' + index} selected value={this.getOptionValue(option)}></option>): null;
+
+        return (
+            <div className="p-hidden-accessible p-multiselect-hidden-select">
+                <select ref={(el) => this.nativeSelect = el} required={this.props.required} name={this.props.name} tabIndex="-1" aria-hidden="true" multiple>
+                    {selectedOptions}
+                </select>
+            </div>
+        );
+    }
+
     render() {
         let className = classNames('p-multiselect p-component', this.props.className, {'p-disabled': this.props.disabled});
         let label = this.renderLabel();
+        let hiddenSelect = this.renderHiddenSelect();
         let items = this.props.options;
 
         if (items) {
@@ -493,9 +516,10 @@ export class MultiSelect extends Component {
 
         return (
             <div id={this.props.id} className={className} onClick={this.onClick} ref={el => this.container = el} style={this.props.style}>
+                {hiddenSelect}
                 <div className="p-hidden-accessible">
                     <input readOnly type="text" onFocus={this.onFocus} onBlur={this.onBlur} ref={el => this.focusInput = el} aria-haspopup="listbox"
-                           aria-labelledby={this.props.ariaLabelledBy}/>
+                           aria-labelledby={this.props.ariaLabelledBy} inputId={this.props.inputId} />
                 </div>
                 {label}
                 <div className="p-multiselect-trigger">

diff --git a/src/showcase/dropdown/DropdownDemo.js b/src/showcase/dropdown/DropdownDemo.js
@@ -280,6 +280,12 @@ carTemplate(option) {
                                         <td>null</td>
                                         <td>Unique identifier of the element.</td>
                                     </tr>
+                                    <tr>
+                                        <td>name</td>
+                                        <td>string</td>
+                                        <td>null</td>
+                                        <td>Name of the input element.</td>
+                                    </tr>
                                     <tr>
                                         <td>value</td>
                                         <td>any</td>

diff --git a/src/showcase/multiselect/MultiSelectDemo.js b/src/showcase/multiselect/MultiSelectDemo.js
@@ -287,6 +287,12 @@ selectedCarTemplate(option) {
                             <td>null</td>
                             <td>Unique identifier of the element.</td>
                         </tr>
+                        <tr>
+                            <td>name</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Name of the input element.</td>
+                        </tr>
                         <tr>
                             <td>value</td>
                             <td>array</td>
@@ -377,6 +383,18 @@ selectedCarTemplate(option) {
                             <td>null</td>
                             <td>A property to uniquely match the value in options for better performance.</td>
                         </tr>
+                        <tr>
+                            <td>required</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
+                        </tr>
+                        <tr>
+                            <td>inputId</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Identifier of the focusable input.</td>
+                        </tr>
                         <tr>
                             <td>tooltip</td>
                             <td>any</td>
@@ -461,6 +479,26 @@ selectedCarTemplate(option) {
                 </table>
             </div>
 
+            <h3>Methods</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>checkValidity</td>
+                            <td>-</td>
+                            <td>Checks whether the native hidden select element has any constraints and returns a boolean for the result.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
             <h3>Styling</h3>
             <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
             <div className="doc-tablewrapper">