Fixed #826 - Remove autoWidth from Dropdown

primefaces · Mar 29, 2019 · 5f2096e · 5f2096e
1 parent 64e91f2
commit 5f2096e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 42 deletions.
diff --git a/src/components/dropdown/Dropdown.css b/src/components/dropdown/Dropdown.css
@@ -3,6 +3,7 @@
     position: relative;
     cursor: pointer;
     vertical-align: middle;
+    min-width: 12.5em;
 }
 
 .p-dropdown .p-dropdown-clear-icon {
@@ -119,4 +120,5 @@
 /** Dropdown **/
 .p-fluid .p-dropdown {
     width: 100%;
+    min-width: 100%;
 }
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -17,7 +17,6 @@ export class Dropdown extends Component {
         itemTemplate: null,
         style: null,
         className: null,
-        autoWidth: true,
         scrollHeight: '200px',
         filter: false,
         filterPlaceholder: null,
@@ -48,7 +47,6 @@ export class Dropdown extends Component {
         itemTemplate: PropTypes.func,
         style: PropTypes.object,
         className: PropTypes.string,
-        autoWidth: PropTypes.bool,
         scrollHeight: PropTypes.string,
         filter: PropTypes.bool,
         filterPlaceholder: PropTypes.string,
@@ -383,7 +381,6 @@ export class Dropdown extends Component {
 
         if(currentSelectedOption !== event.option) {              
             this.updateEditableLabel(event.option);
-            this.updateHiddenSelect();
             this.props.onChange({
                 originalEvent: event.originalEvent,
                 value: this.props.optionLabel ? event.option : event.option.value,
@@ -397,11 +394,6 @@ export class Dropdown extends Component {
             });
         } 
     }
-
-    updateHiddenSelect(option) {
-        let selectedOptionIndex = this.findOptionIndex(option);
-        this.nativeSelect.selectedIndex = selectedOptionIndex + 1;
-    }
 
     findOptionIndex(value) {    
         let index = -1;
@@ -505,22 +497,6 @@ export class Dropdown extends Component {
         return this.state.filter && this.state.filter.trim().length > 0;
     }
 
-    renderHiddenSelect() {
-        let placeHolderOption = <option value="">{this.props.placeholder}</option>;
-        let options = this.props.options && this.props.options.map((option, i) => {
-            return <option key={this.getOptionKey(option)} value={option.value}>{this.getOptionLabel(option)}</option>;
-        });
-
-        return (
-            <div className="p-hidden-accessible">
-                <select ref={(el) => this.nativeSelect = el} required={this.props.required} tabIndex="-1" aria-hidden="true">
-                    {placeHolderOption}
-                    {options}
-                </select>
-            </div>
-        );
-    }
-
     renderKeyboardHelper() {
         return <div className="p-hidden-accessible">
                     <input ref={(el) => this.focusInput = el} id={this.props.inputId} type="text" role="listbox"
@@ -617,15 +593,6 @@ export class Dropdown extends Component {
     }
 
     componentDidMount() {
-        if(this.props.autoWidth) {
-            // Added setTimeout to render it with the correct width value in hidden container components such as TabView and Accordion.
-            setTimeout(() => {
-                if(!this.props.style || (!this.props.style['width'] && !this.props.style['min-width'])) {
-                    this.container.style.width = this.nativeSelect.offsetWidth + 30 + 'px';
-                }
-            }, 0);
-        }
-
         if (this.props.autoFocus && this.focusInput) {
             this.windowLoadListener = () => {
                 this.focusInput.focus();
@@ -637,8 +604,6 @@ export class Dropdown extends Component {
         if (this.props.tooltip) {
             this.renderTooltip();
         }
-
-        this.updateHiddenSelect(this.findOption(this.props.value));
     }
 
     componentWillUnmount() {
@@ -674,8 +639,6 @@ export class Dropdown extends Component {
             else
                 this.renderTooltip();
         }
-
-        this.updateHiddenSelect(this.findOption(this.props.value));
     }
 
     renderTooltip() {
@@ -692,7 +655,6 @@ export class Dropdown extends Component {
         let selectedOption = this.findOption(this.props.value);
         let label = selectedOption ? this.getOptionLabel(selectedOption) : null;
 
-        let hiddenSelect = this.renderHiddenSelect();
         let keyboardHelper = this.renderKeyboardHelper();
         let labelElement = this.renderLabel(label);
         let dropdownIcon = this.renderDropdownIcon();
@@ -708,7 +670,6 @@ export class Dropdown extends Component {
         return (
             <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}>
-                 {hiddenSelect}
                  {keyboardHelper}
                  {labelElement}
                  {clearIcon}

diff --git a/src/showcase/dropdown/DropdownDemo.js b/src/showcase/dropdown/DropdownDemo.js
@@ -79,16 +79,16 @@ export class DropdownDemo extends Component {
 
                 <div className="content-section implementation">
                     <h3>Basic</h3>
-                    <Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}} placeholder="Select a City" optionLabel="name" />
+                    <Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} placeholder="Select a City" optionLabel="name" />
                     <div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city.name : 'No city selected'}</div>
 
                     <h3>Editable</h3>
                     <Dropdown value={this.state.car} options={cars} onChange={this.onCarChange}
-                              style={{width:'150px'}} editable={true} placeholder="Select a Brand"/>
+                              editable={true} placeholder="Select a Brand"/>
                     <div style={{marginTop: '.5em'}}>{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}</div>
 
                     <h3>Advanced</h3>
-                    <Dropdown value={this.state.car2} options={cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate} style={{width:'150px'}}
+                    <Dropdown value={this.state.car2} options={cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate}
                               filter={true} filterPlaceholder="Select Car" filterBy="label,value" showClear={true}/>
                     <div style={{marginTop: '.5em'}}>{this.state.car2 ? 'Selected Car: ' + this.state.car2 : 'No car selected'}</div>
                 </div>