Fixed #933 - The "required" prop is not working on Dropdown

primefaces · Jun 20, 2019 · 601becb · 601becb
1 parent 60689fe
commit 601becb
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/src/components/dropdown/Dropdown.css b/src/components/dropdown/Dropdown.css
@@ -6,6 +6,21 @@
     min-width: 12.5em;
 }
 
+.p-dropdown .p-dropdown-hidden-select {
+    bottom: 0;
+    clip: auto;
+}
+
+.p-dropdown .p-dropdown-hidden-select select {
+    -webkit-transform: none;
+    transform: none;
+    height: 1px;
+    position: absolute;
+    top: 0;
+    clip: rect(0px, 0px, 0px, 0px);
+    pointer-events: none;
+}
+
 .p-dropdown .p-dropdown-clear-icon {
     position: absolute;
     right: 2em;

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -517,10 +517,23 @@ export class Dropdown extends Component {
     hasFilter() {
         return this.state.filter && this.state.filter.trim().length > 0;
     }
+
+    renderHiddenSelect(selectedOption) {
+        let value = selectedOption ? selectedOption.value : null;
+        let option = selectedOption ? <option value={value}>{this.getOptionLabel(selectedOption)}</option> : null;
+
+        return (	
+            <div className="p-hidden-accessible p-dropdown-hidden-select">	
+                <select defaultValue={value} required={this.props.required} tabIndex="-1" aria-hidden="true">
+                    {option}	
+                </select>	
+            </div>	
+        );	
+    }
 
     renderKeyboardHelper() {
         return <div className="p-hidden-accessible">
-                    <input ref={(el) => this.focusInput = el} id={this.props.inputId} type="text" role="listbox"
+                    <input ref={(el) => this.focusInput = el} id={this.props.inputId} type="text" role="listbox" readOnly={true}
                         onFocus={this.onInputFocus} onBlur={this.onInputBlur} onKeyDown={this.onInputKeyDown}
                         disabled={this.props.disabled} tabIndex={this.props.tabIndex} aria-label={this.props.ariaLabel} aria-labelledby={this.props.ariaLabelledBy}  />
                 </div>;
@@ -665,6 +678,7 @@ export class Dropdown extends Component {
         let selectedOption = this.findOption(this.props.value);
         let label = selectedOption ? this.getOptionLabel(selectedOption) : null;
 
+        let hiddenSelect = this.renderHiddenSelect(selectedOption);
         let keyboardHelper = this.renderKeyboardHelper();
         let labelElement = this.renderLabel(label);
         let dropdownIcon = this.renderDropdownIcon();
@@ -681,6 +695,7 @@ export class Dropdown extends Component {
             <div id={this.props.id} ref={(el) => this.container = el} className={className} style={this.props.style} onClick={this.onClick}
                  onMouseDown={this.props.onMouseDown} onContextMenu={this.props.onContextMenu}>
                  {keyboardHelper}
+                 {hiddenSelect}
                  {labelElement}
                  {clearIcon}
                  {dropdownIcon}