Ghost/ghost/admin/app/components/gh-token-input/trigger.hbs
Kevin Ansfield e721bca2d9 Fixed delete button in token select inputs
refs 654d373655

- ember-power-select switch to Glimmer components meant that our mousedown handler that was going through Ember's event bus was firing after the EPS events which trigger dropdown open/close and therefore not triggering the delete action
2020-05-18 13:33:21 +01:00

67 lines
2.4 KiB
Handlebars

<SortableObjects
@tagName="ul"
@id={{concat "ember-power-select-multiple-options-" @select.uniqueId}}
@class="ember-power-select-multiple-options"
@sortableObjectList={{@select.selected}}
@enableSort={{true}}
@useSwap={{false}}
@sortEndAction={{action "reorderItems"}}
>
{{#each @select.selected as |opt idx|}}
{{#component (or @extra.tokenComponent "draggable-object")
tagName="li"
class="ember-power-select-multiple-option"
select=@select
content=(readonly opt)
idx=idx
isSortable=true
mouseDown=this.handleOptionMouseDown
touchStart=this.handleOptionTouchStart
}}
{{#if @selectedItemComponent}}
{{component @selectedItemComponent option=(readonly opt) select=(readonly @select)}}
{{else}}
{{yield opt @select}}
{{/if}}
{{#unless @select.disabled}}
<span role="button"
aria-label="remove element"
class="ember-power-select-multiple-remove-btn"
data-selected-index={{idx}}
{{on "mousedown" this.handleOptionMouseDown}}
>
{{svg-jar "close" data-selected-index=idx}}
</span>
{{/unless}}
{{/component}}
{{else}}
{{#if (and @placeholder (not @searchEnabled))}}
<span class="ember-power-select-placeholder">{{@placeholder}}</span>
{{/if}}
{{/each}}
{{#if @searchEnabled}}
<input
type="search"
class="ember-power-select-trigger-multiple-input"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
value={{@select.searchText}}
aria-controls={{@listboxId}}
style={{this.triggerMultipleInputStyle}}
placeholder={{this.maybePlaceholder}}
disabled={{@select.disabled}}
tabindex={{@tabindex}}
{{on "focus" @onFocus}}
{{on "blur" @onBlur}}
{{on "input" this.handleInput}}
{{on "keydown" this.handleKeydown}}
{{did-insert this.storeInputStyles}}
>
{{/if}}
</SortableObjects>
<span class="ember-power-select-status-icon"></span>