Fixed #844 - Editable Dropdown should support maxLength

primefaces · May 30, 2019 · e6bf829 · e6bf829
1 parent 95990dc
commit e6bf829
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
@@ -26,6 +26,7 @@ interface DropdownProps {
     dataKey?: string;
     inputId?: string;
     showClear?: boolean;
+    maxLength?: number;
     tooltip?: any;
     tooltipOptions?: TooltipOptions;
     ariaLabel?: string,

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -32,6 +32,7 @@ export class Dropdown extends Component {
         dataKey: null,
         inputId: null,
         showClear: false,
+        maxLength: null,
         tooltip: null,
         tooltipOptions: null,
         ariaLabel: null,
@@ -65,6 +66,7 @@ export class Dropdown extends Component {
         dataKey: PropTypes.string,
         inputId: PropTypes.string,
         showClear: PropTypes.bool,
+        maxLength: PropTypes.number,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
         ariaLabel: PropTypes.string,
@@ -528,7 +530,7 @@ export class Dropdown extends Component {
         if(this.props.editable) {
             let value = label||this.props.value||'';
 
-            return <input ref={(el) => this.editableInput = el} type="text" defaultValue={value} className="p-dropdown-label p-inputtext" disabled={this.props.disabled} placeholder={this.props.placeholder}
+            return <input ref={(el) => this.editableInput = el} type="text" defaultValue={value} className="p-dropdown-label p-inputtext" disabled={this.props.disabled} placeholder={this.props.placeholder} maxLength={this.props.maxLength}
                         onClick={this.onEditableInputClick} onInput={this.onEditableInputChange} onFocus={this.onEditableInputFocus} onBlur={this.onInputBlur} aria-label={this.props.ariaLabel} aria-labelledby={this.props.ariaLabelledBy}/>;
         }
         else {

diff --git a/src/showcase/dropdown/DropdownDemo.js b/src/showcase/dropdown/DropdownDemo.js
@@ -84,7 +84,7 @@ export class DropdownDemo extends Component {
 
                     <h3>Editable</h3>
                     <Dropdown value={this.state.car} options={cars} onChange={this.onCarChange}
-                              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>
@@ -354,6 +354,12 @@ carTemplate(option) {
                                         <td>false</td>
                                         <td>When enabled, a clear icon is displayed to clear the value.</td>
                                     </tr>
+                                    <tr>
+                                        <td>maxLength</td>
+                                        <td>number</td>
+                                        <td>null</td>
+                                        <td>Maximum number of characters to be typed on an editable input.</td>
+                                    </tr>
                                     <tr>
                                         <td>tooltip</td>
                                         <td>any</td>