diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts index daa02628fd..6ed3fe0c96 100755 --- 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 index 23393f723d..6d313d6595 100644 --- 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 this.editableInput = el} type="text" defaultValue={value} className="p-dropdown-label p-inputtext" disabled={this.props.disabled} placeholder={this.props.placeholder} + return 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 index 25e037f3b4..7ab1a8f788 100644 --- a/src/showcase/dropdown/DropdownDemo.js +++ b/src/showcase/dropdown/DropdownDemo.js @@ -84,7 +84,7 @@ export class DropdownDemo extends Component {

Editable

+ editable={true} placeholder="Select a Brand" />
{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}

Advanced

@@ -354,6 +354,12 @@ carTemplate(option) { false When enabled, a clear icon is displayed to clear the value. + + maxLength + number + null + Maximum number of characters to be typed on an editable input. + tooltip any