Ghost/ghost/admin/app/components/gh-benefit-item.hbs
Rishabh 984b4a6739 Refined enter behavior for benefits section in modal
refs https://github.com/TryGhost/Team/issues/874

In the product benefits modal in Admin, hitting Enter has been updated to work as -
- when hit with focus in an empty benefit field: does nothing
- when hit with focus in any field outside benefit fields: does nothing
- add new benefit and focus on it when hit while on a non-empty benefit
2021-08-20 14:20:51 +05:30

39 lines
1.3 KiB
Handlebars

{{#unless this.benefitItem.isNew}}
<span class="gh-blognav-grab">
{{svg-jar "grab"}}
<span class="sr-only">Reorder</span>
</span>
{{/unless}}
<div class="gh-blognav-line">
<GhValidationStatusContainer
@tagName="span"
@class="gh-blognav-label"
@errors={{this.benefitItem.errors}}
@property="name"
@hasValidated={{this.benefitItem.hasValidated}}
>
<GhTrimFocusInput
@shouldFocus={{this.benefitItem.last}}
@placeholder="Add benefit"
@value={{readonly this.name}}
@input={{action "updateLabel" value="target.value"}}
@keyPress={{action "clearLabelErrors"}}
@stopEnterKeyDownPropagation={{true}}
@focus-out={{action "updateLabel" this.name}} data-test-input="name" />
<GhErrorMessage
@errors={{this.benefitItem.errors}}
@property="name" data-test-error="name" />
</GhValidationStatusContainer>
</div>
{{#if this.benefitItem.isNew}}
<button type="button" class="gh-blognav-add" {{action "addItem" this.benefitItem}}>
{{svg-jar "add"}}<span class="sr-only">Add</span>
</button>
{{else}}
<button type="button" class="gh-blognav-delete" {{action "deleteItem" this.benefitItem}}>
{{svg-jar "trash"}}<span class="sr-only">Delete</span>
</button>
{{/if}}