Skip to content

Commit 4dd8b37

Browse files
patrinhani-ciandtpatrinhani-ciandt
committed
Bug fixes
- Initialization of Array properties to avoid shared value issues on multiple component instances . - Handler of suggestion item tap to be compatible with other browsers.
1 parent 1b10903 commit 4dd8b37

File tree

4 files changed

+62
-87
lines changed

4 files changed

+62
-87
lines changed

‎input-autocomplete-behavior.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
*/
1818
localCandidates:{
1919
type:Array,
20-
value:[]
20+
value:function () { return []; }
2121
},
2222
/**
2323
* Remote URL.
@@ -31,7 +31,7 @@
3131
*/
3232
_suggestions:{
3333
type:Array,
34-
value:[]
34+
value: function () { return []; }
3535
},
3636
/**
3737
* Maximum number of suggestions to show up in typeahead.
@@ -301,7 +301,8 @@
301301

302302
_blur: function(e){
303303
//console.debug('[_blur]', e);
304-
if ((!e.relatedTarget) || ((e.relatedTarget) && (e.relatedTarget.tagName !== 'PAPER-ITEM') && (e.relatedTarget.tagName !== 'PAPER-ICON-ITEM'))) {
304+
var relativeFocusedTarget = e.relatedTarget || e.explicitOriginalTarget;
305+
if ((!relativeFocusedTarget) || ((relativeFocusedTarget) && (!this._menuElement.contains(relativeFocusedTarget)))) {
305306
this.setSuggestions([]);
306307
this.inputValue = '';
307308
}

‎paper-autocomplete-results.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,15 @@
2626

2727
behaviors: [
2828
],
29+
30+
hostAttributes: {
31+
'tabindex': -1
32+
},
2933

3034
properties: {
3135
selectableItems: {
3236
type: Array,
33-
value: []
37+
value: function() { return []; }
3438
}
3539
},
3640

‎paper-input-autocomplete-chips.html‎

Lines changed: 52 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -231,116 +231,85 @@
231231
<template is="dom-if" if="{{item.imgUrl}}">
232232
<div class="icon avatar-chip-icon"><img src$="[[item.imgUrl]]"></div>
233233
</template>
234-
<template is="dom-if" if="{{!item.imgUrl}}">
234+
<template is="dom-if" if="{{!item.imgUrl}}">
235235
<div class="icon avatar-chip-icon">[[getInitialsFrom(item.text)]]</div>
236236
</template>
237-
</paper-chip>
238-
</template>
239-
<div id="inputContainer" class="input-container">
240-
<input is="iron-input" id="input" class="autocomplete-input"
241-
on-keyup="_local_keyup"
242-
on-keydown="_local_keydown"
243-
on-paste="_local_paste"
244-
on-blur="_local_blur"
245-
on-focus="_onInputFocus"
246-
aria-labelledby$="[[_ariaLabelledBy]]"
247-
aria-describedby$="[[_ariaDescribedBy]]"
248-
disabled$="[[disabled]]"
249-
bind-value="{{inputValue}}"
250-
invalid="{{invalid}}"
251-
prevent-invalid-input="[[preventInvalidInput]]"
252-
allowed-pattern="[[allowedPattern]]"
253-
validator="[[validator]]"
254-
type$="[[type]]"
255-
pattern$="[[pattern]]"
256-
required$="[[required]]"
257-
autocomplete$="[[autocomplete]]"
258-
autofocus$="[[autofocus]]"
259-
inputmode$="[[inputmode]]"
260-
minlength$="[[minlength]]"
261-
maxlength$="[[maxlength]]"
262-
min$="[[min]]"
263-
max$="[[max]]"
264-
step$="[[step]]"
265-
name$="[[name]]"
266-
placeholder$="[[_placeholderAfterSelected]]"
267-
readonly$="[[readonly]]"
268-
list$="[[list]]"
269-
size$="[[size]]"
270-
autocapitalize$="[[autocapitalize]]"
271-
autocorrect$="[[autocorrect]]"
272-
on-change="_onChange"
273-
tabindex$="[[tabindex]]"
274-
autosave$="[[autosave]]"
275-
results$="[[results]]"
276-
accept$="[[accept]]"
277-
multiple$="[[multiple]]">
278-
</div>
279-
</div>
280-
281-
<div class="suffix-container" suffix>
282-
<content select="[suffix]"></content>
283-
</div>
284-
285-
<template is="dom-if" if="[[errorMessage]]">
237+
</paper-chip>
238+
</template>
239+
<div id="inputContainer" class="input-container">
240+
<input is="iron-input" id="input" class="autocomplete-input" on-keyup="_local_keyup" on-keydown="_local_keydown" on-paste="_local_paste"
241+
on-blur="_local_blur" on-focus="_onInputFocus" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]"
242+
disabled$="[[disabled]]" bind-value="{{inputValue}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]"
243+
allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]"
244+
autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]"
245+
min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[_placeholderAfterSelected]]" readonly$="[[readonly]]"
246+
list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange"
247+
tabindex$="[[tabindex]]" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]">
248+
</div>
249+
</div>
250+
251+
<div class="suffix-container" suffix>
252+
<content select="[suffix]"></content>
253+
</div>
254+
255+
<template is="dom-if" if="[[errorMessage]]">
286256
<paper-input-error>[[errorMessage]]</paper-input-error>
287257
</template>
288-
</paper-input-container>
289-
<paper-material id="suggestionsPanel" elevation="3" class="autocomplete-suggestion-container" animated="[[animated]]">
290-
<template is="dom-if" if="{{_loading}}">
258+
</paper-input-container>
259+
<paper-material id="suggestionsPanel" elevation="3" class="autocomplete-suggestion-container" animated="[[animated]]">
260+
<template is="dom-if" if="{{_loading}}">
291261
<div id="loading">
292262
<content select="[loading]"></content>
293263
</div>
294264
</template>
295265

296-
<paper-autocomplete-results id="autocompleteResults" class="autocomplete-suggestions" hidden="[[_loading]]">
297-
<template is="dom-if" if="[[!groupedSuggestions]]">
266+
<paper-autocomplete-results id="autocompleteResults" class="autocomplete-suggestions" hidden="[[_loading]]">
267+
<template is="dom-if" if="[[!groupedSuggestions]]">
298268
<template is="dom-repeat" items="{{_suggestions}}">
299269
<paper-icon-item class="suggestion-item" data-key="[[item.key]]" data-text="[[item.text]]" data-tag$="[[item.tag]]" data-object="[[item]]" on-mouseover="_onMouseOverSelectable" on-tap="_onTapSelectable" tabindex="-1" selectable-item>
300270
<template is="dom-if" if="{{item.imgUrl}}">
301271
<div class="icon avatar-result-icon" item-icon><img src$="[[item.imgUrl]]"></div>
302272
</template>
303-
<template is="dom-if" if="{{!item.imgUrl}}">
273+
<template is="dom-if" if="{{!item.imgUrl}}">
304274
<div class="icon avatar-result-icon" item-icon>[[getInitialsFrom(item.text)]]</div>
305275
</template>
306-
<paper-item-body>
307-
<div>[[item.text]]</div>
308-
</paper-item-body>
309-
</paper-icon-item>
310-
</template>
311-
</template>
312-
<template is="dom-if" if="[[groupedSuggestions]]">
276+
<paper-item-body>
277+
<div>[[item.text]]</div>
278+
</paper-item-body>
279+
</paper-icon-item>
280+
</template>
281+
</template>
282+
<template is="dom-if" if="[[groupedSuggestions]]">
313283
<template is="dom-repeat" items="{{_suggestions}}">
314284
<paper-icon-item class="suggestion-item suggestion-group" tabindex="-1" disabled>
315285
<template is="dom-if" if="[[item.groupIcon]]">
316286
<iron-icon class="icon" icon="[[item.groupIcon]]" item-icon></iron-icon>
317287
</template>
318-
<paper-item-body>
319-
<div>[[item.groupName]]</div>
320-
</paper-item-body>
321-
</paper-icon-item>
322-
<template is="dom-repeat" items="{{item.items}}">
288+
<paper-item-body>
289+
<div>[[item.groupName]]</div>
290+
</paper-item-body>
291+
</paper-icon-item>
292+
<template is="dom-repeat" items="{{item.items}}">
323293
<paper-icon-item class="suggestion-item suggestion-group-item" data-key="[[item.key]]" data-text="[[item.text]]" data-tag$="[[item.tag]]" data-object="[[item]]" on-mouseover="_onMouseOverSelectable" on-tap="_onTapSelectable" tabindex="-1" selectable-item>
324294
<template is="dom-if" if="{{item.imgUrl}}">
325295
<div class="icon avatar-result-icon" item-icon><img src$="[[item.imgUrl]]"></div>
326296
</template>
327-
<template is="dom-if" if="{{!item.imgUrl}}">
297+
<template is="dom-if" if="{{!item.imgUrl}}">
328298
<div class="icon avatar-result-icon" item-icon>[[getInitialsFrom(item.text)]]</div>
329299
</template>
330-
<paper-item-body>
331-
<div>[[item.text]]</div>
332-
</paper-item-body>
333-
</paper-icon-item>
334-
</template>
335-
</template>
336-
</template>
337-
</paper-autocomplete-results>
300+
<paper-item-body>
301+
<div>[[item.text]]</div>
302+
</paper-item-body>
303+
</paper-icon-item>
304+
</template>
305+
</template>
306+
</template>
307+
</paper-autocomplete-results>
338308

339-
</paper-material>
309+
</paper-material>
340310
</template>
341311
<script>
342312
Polymer({
343-
344313
is: 'paper-input-autocomplete-chips',
345314

346315
behaviors: [
@@ -381,15 +350,15 @@
381350
*/
382351
selectedObjects: {
383352
type: Array,
384-
value:[],
353+
value: function() { return []; },
385354
notify: true
386355
},
387356
/**
388357
* The candidates from local variable.
389358
*/
390359
localCandidates:{
391360
type:Array,
392-
value:[]
361+
value: function() { return []; }
393362
},
394363
/**
395364
* Hidden Input value.
@@ -758,6 +727,7 @@
758727
},
759728

760729
_onBlur: function() {
730+
console.log('[_onBlur]');
761731
this._paperInputContainerElement._handleValueAndAutoValidate(this._inputElement);
762732
},
763733

@@ -817,4 +787,4 @@
817787
},
818788
});
819789
</script>
820-
</dom-module>
790+
</dom-module>

‎paper-input-autocomplete.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ <h3>{{label}}</h3>
8787
*/
8888
_prefetchedCandidates:{
8989
type:Array,
90-
value:[]
90+
value:function () { return []; }
9191
},
9292
/**
9393
* Remote url to perform a search using the value in the input. The input value will be passed in as url parameter. The placeholder should be %QUERY.

0 commit comments

Comments
 (0)