Fixed #711

primefaces · Aug 8, 2016 · ab5716f · ab5716f
1 parent c124fc0
commit ab5716f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/components/dropdown/dropdown.ts b/components/dropdown/dropdown.ts
@@ -22,7 +22,9 @@ const DROPDOWN_VALUE_ACCESSOR: Provider = new Provider(NG_VALUE_ACCESSOR, {
             <div class="ui-helper-hidden-accessible">
                 <input #in type="text" readonly (focus)="onFocus($event)" (blur)="onBlur($event)" (keydown)="onKeydown($event)">
             </div>
-            <label class="ui-dropdown-label ui-inputtext ui-corner-all">{{label ? label : '&nbsp;'}}</label>
+            <label class="ui-dropdown-label ui-inputtext ui-corner-all" *ngIf="!editable">{{label ? label : '&nbsp;'}}</label>
+            <input type="text" class="ui-dropdown-label ui-inputtext ui-corner-all" *ngIf="editable" 
+                        (click)="onInputClick($event)" (input)="onInputChange($event)" (focus)="hide()">
             <div class="ui-dropdown-trigger ui-state-default ui-corner-right" [ngClass]="{'ui-state-hover':hover&&!disabled,'ui-state-focus':focus}">
                 <span class="fa fa-fw fa-caret-down"></span>
             </div>
@@ -68,6 +70,8 @@ export class Dropdown implements OnInit,AfterViewInit,AfterViewChecked,DoCheck,O
 
     @Input() required: boolean;
 
+    @Input() editable: boolean;
+
     @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
 
     constructor(protected el: ElementRef, protected domHandler: DomHandler, protected renderer: Renderer, differs: IterableDiffers) {
@@ -188,7 +192,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterViewChecked,DoCheck,O
 
     updateSelectedOption(val: any): void {
         this.selectedOption = this.findOption(val, this.optionsToDisplay);
-        if(!this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length) {
+        if(!this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length && !this.editable) {
             this.selectedOption = this.optionsToDisplay[0];
         }
         this.selectedOptionUpdated = true;
@@ -237,6 +241,20 @@ export class Dropdown implements OnInit,AfterViewInit,AfterViewChecked,DoCheck,O
         }
     }
 
+    onInputClick(event) {
+        this.itemClick = true;
+    }
+
+    onInputChange(event) {
+        this.value = event.target.value;
+        this.updateSelectedOption(this.value);                
+        this.onModelChange(this.value);
+        this.onChange.emit({
+            originalEvent: event,
+            value: this.value
+        });
+    }
+
     show(panel,container) {
         if(this.options && this.options.length) {
             this.panelVisible = true;

diff --git a/showcase/demo/dropdown/dropdown.html b/showcase/demo/dropdown/dropdown.html
@@ -10,16 +10,20 @@ <h3 class="first">Single</h3>
     <p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
     <p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
 
+    <h3>Editable</h3>
+    <p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" editable="editable"></p-dropdown>
+    <p>Selected City: {{selectedCar||'none'}}</p>
+
     <h3>Content with Filters</h3>
-    <p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" filter="filter">
+    <p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="filter">
         <template let-car>
             <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                 <img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/>
                 <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
             </div>
         </template>
     </p-dropdown>
-    <p>Selected Car: {{selectedCar||'none'}}</p>
+    <p>Selected Car: {{selectedCar2||'none'}}</p>
 </div>
 
 <div class="ContentSideSections Source">
@@ -183,6 +187,12 @@ <h3>Attributes</h3>
                             <td>false</td>
                             <td>When present, it specifies that the component should be disabled.</td>
                         </tr>
+                        <tr>
+                            <td>editable</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -273,18 +283,22 @@ <h3>Dependencies</h3>
 <code class="language-markup" pCode ngNonBindable>
 &lt;h3 class="first"&gt;Single&lt;/h3&gt;
 &lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity"&gt;&lt;/p-dropdown&gt;
-&lt;p&gt;Selected City: {{selectedCity||'none'}}&lt;/p&gt;
+&lt;p&gt;Selected City: {{selectedCity ? selectedCity.name : 'none'}}&lt;/p&gt;
+
+&lt;h3&gt;Editable&lt;/h3&gt;
+&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" editable="editable"&gt;&lt;/p-dropdown&gt;
+&lt;p&gt;Selected City: {{selectedCar||'none'}}&lt;/p&gt;
 
-&lt;h3&gt;Content with Filter&lt;/h3&gt;
-&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" filter="filter"&gt;
+&lt;h3&gt;Content with Filters&lt;/h3&gt;
+&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="filter"&gt;
     &lt;template let-car&gt;
         &lt;div class="ui-helper-clearfix" style="position: relative;height: 25px;"&gt;
             &lt;img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/&gt;
             &lt;div style="font-size:14px;float:right;margin-top:4px"&gt;{{car.label}}&lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/p-dropdown&gt;
-&lt;p&gt;Selected Car: {{selectedCar||'none'}}&lt;/p&gt;
+&lt;p&gt;Selected Car: {{selectedCar2||'none'}}&lt;/p&gt;
 </code>
 </pre>
 

diff --git a/showcase/demo/dropdown/dropdowndemo.ts b/showcase/demo/dropdown/dropdowndemo.ts
@@ -19,7 +19,9 @@ export class DropdownDemo {
 
     cars: SelectItem[];
 
-    selectedCar: string = 'BMW';
+    selectedCar: string;
+
+    selectedCar2: string = 'BMW';
 
     constructor() {
         this.cities = [];