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

View File

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