Resolved linter errors in <Members::FilterValue> component

refs https://github.com/TryGhost/Ghost/issues/14101

- dropped use of unnecessary `<GhTextInput>` component
- switched action calls over to standard `{{on "event"}}` rather than the sometimes error-prone overriding of EmberObject component event handlers
This commit is contained in:
Kevin Ansfield 2022-02-08 15:10:53 +00:00
parent b80ce527e5
commit e3aa51310c
2 changed files with 35 additions and 26 deletions

View File

@ -22,33 +22,38 @@
</span> </span>
{{else if (eq @filter.type 'email_count')}} {{else if (eq @filter.type 'email_count')}}
<GhTextInput <input
@value={{@filter.value}} type="number"
@type="number" value={{@filter.value}}
@focus-out={{fn this.updateInputFilterValue @filter.type @filter.id}} class="gh-input"
@input={{fn this.setInputFilterValue @filter.type @filter.id}} aria-label="Email count filter value"
@keyPress={{fn this.updateInputFilterValueOnEnter @filter.type @filter.id}} {{on "input" (fn this.setInputFilterValue @filter.type @filter.id)}}
@stopEnterKeyDownPropagation={{true}} {{on "blur" (fn this.updateInputFilterValue @filter.type @filter.id)}}
{{on "keypress" (fn this.updateInputFilterValueOnEnter @filter.type @filter.id)}}
/> />
{{else if (eq @filter.type 'email_opened_count')}} {{else if (eq @filter.type 'email_opened_count')}}
<GhTextInput <input
@value={{@filter.value}} type="number"
@type="number" value={{@filter.value}}
@focus-out={{fn this.updateInputFilterValue @filter.type @filter.id}} class="gh-input"
@keyPress={{fn this.updateInputFilterValueOnEnter @filter.type @filter.id}} aria-label="Email opened count filter value"
@input={{fn this.setInputFilterValue @filter.type @filter.id}} {{on "input" (fn this.setInputFilterValue @filter.type @filter.id)}}
{{on "blur" (fn this.updateInputFilterValue @filter.type @filter.id)}}
{{on "keypress" (fn this.updateInputFilterValueOnEnter @filter.type @filter.id)}}
/> />
{{else if (eq @filter.type 'email_open_rate')}} {{else if (eq @filter.type 'email_open_rate')}}
<div class="relative"> <div class="relative">
<span class="gh-input-percentage-label">%</span> <span class="gh-input-percentage-label">%</span>
<GhTextInput <input
@value={{@filter.value}} type="number"
@type="number" value={{@filter.value}}
@focus-out={{fn this.updateInputFilterValue @filter.type @filter.id}} class="gh-input"
@keyPress={{fn this.updateInputFilterValueOnEnter @filter.type @filter.id}} aria-label="Email open rate filter value"
@input={{fn this.setInputFilterValue @filter.type @filter.id}} {{on "input" (fn this.setInputFilterValue @filter.type @filter.id)}}
{{on "blur" (fn this.updateInputFilterValue @filter.type @filter.id)}}
{{on "keypress" (fn this.updateInputFilterValueOnEnter @filter.type @filter.id)}}
/> />
</div> </div>
@ -90,11 +95,14 @@
{{svg-jar "arrow-down-small"}} {{svg-jar "arrow-down-small"}}
</span> </span>
{{else}} {{else}}
<GhTextInput <input
@name={{@filter.id}} type="text"
@value={{@filter.value}} value={{@filter.value}}
@focus-out={{fn this.updateInputFilterValue @filter.type @filter.id}} name={{@filter.id}}
@keyPress={{fn this.updateInputFilterValueOnEnter @filter.type @filter.id}} class="gh-input"
@input={{fn this.setInputFilterValue @filter.type @filter.id}} aria-label="{{@filter.id}} filter value"
{{on "input" (fn this.setInputFilterValue @filter.type @filter.id)}}
{{on "blur" (fn this.updateInputFilterValue @filter.type @filter.id)}}
{{on "keypress" (fn this.updateInputFilterValueOnEnter @filter.type @filter.id)}}
/> />
{{/if}} {{/if}}

View File

@ -48,7 +48,8 @@ export default class MembersFilterValue extends Component {
@action @action
updateInputFilterValueOnEnter(filterType, filterId, event) { updateInputFilterValueOnEnter(filterType, filterId, event) {
if (event.keyCode === 13) { if (event.key === 'Enter') {
event.preventDefault();
this.args.setFilterValue(filterType, filterId, this.filterValue); this.args.setFilterValue(filterType, filterId, this.filterValue);
} }
} }