TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 21:40:39 +03:00
Code Issues Projects Releases Wiki Activity

Fixed Firefox not respecting default selected operator when changing filter type

Browse Source 
no issue

- if `<option>` elements are re-rendered without the parent `<select>` being re-rendered, Firefox does not pick up the new `selected` option
  - we were seeing this behaviour when the options in an operator select get updated after changing the filter type, Firefox was always selecting the first option rather than the "selected" option
- switched the `filters` array from an EmberArray instance over to a tracked built in Array instance and changed the "edit" behaviour when changing a filter type so we fully replace a `Filter` instance in the filters array with a new instance which causes an overall re-render of that filter row avoiding the Firefox issue
This commit is contained in:
Kevin Ansfield 2022-03-03 21:53:33 +00:00
parent b392bdfc0e
commit bee16a023d
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ghost/admin/app/components/members/filter.js
View File

@ -2,6 +2,7 @@ import Component from '@glimmer/component';
import moment from 'moment';
import nql from '@nexes/nql-lang';
import {A} from '@ember/array';
import {TrackedArray} from 'tracked-built-ins';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
@ -168,7 +169,7 @@ export default class MembersFilter extends Component {
@service settings;
@service store;
@tracked filters = A([
@tracked filters = new TrackedArray([
new Filter({
id: `filter-0`,
type: 'label',
@ -224,7 +225,7 @@ export default class MembersFilter extends Component {
@action
addFilter() {
this.filters.pushObject(new Filter({
this.filters.push(new Filter({
id: `filter-${this.nextFilterId}`,
type: 'label',
relation: 'is',
@ -440,7 +441,7 @@ export default class MembersFilter extends Component {
});
}
this.filters = A(filterData);
this.filters = new TrackedArray(filterData);
}
getFilterRelationOperator(relation) {
@ -459,11 +460,10 @@ export default class MembersFilter extends Component {
event.stopPropagation();
event.preventDefault();
const filterToDelete = this.filters.findBy('id', filterId);
if (this.filters.length === 1) {
this.resetFilter();
} else {
this.filters.removeObject(filterToDelete);
this.filters = new TrackedArray(this.filters.reject(f => f.id === filterId));
this.applySoftFilter();
}
}
@ -499,13 +499,17 @@ export default class MembersFilter extends Component {
defaultRelation = 'is-or-less';
}
const filterToEdit = this.filters.findBy('id', filterId);
if (filterToEdit) {
filterToEdit.type = newType;
filterToEdit.relationOptions = this.availableFilterRelationsOptions[newType];
filterToEdit.relation = defaultRelation;
filterToEdit.value = defaultValue;
}
const newFilter = new Filter({
id: filterId,
type: newType,
relation: defaultRelation,
relationOptions: this.availableFilterRelationsOptions[newType],
value: defaultValue,
timezone: this.settings.get('timezone')
});
const filterToSwap = this.filters.find(f => f.id === filterId);
this.filters[this.filters.indexOf(filterToSwap)] = newFilter;
if (newType !== 'label' && defaultValue) {
this.applySoftFilter();
@ -518,14 +522,14 @@ export default class MembersFilter extends Component {
@action
setFilterRelation(filterId, newRelation) {
const filterToEdit = this.filters.findBy('id', filterId);
const filterToEdit = this.filters.find(f => f.id === filterId);
filterToEdit.relation = newRelation;
this.applySoftFilter();
}
@action
setFilterValue(filterType, filterId, filterValue) {
const filterToEdit = this.filters.findBy('id', filterId);
const filterToEdit = this.filters.find(f => f.id === filterId);
filterToEdit.value = filterValue;
this.applySoftFilter();
}
@ -561,7 +565,7 @@ export default class MembersFilter extends Component {
@action
resetFilter() {
this.nextFilterId = 1;
this.filters = A([
this.filters = new TrackedArray([
new Filter({
id: `filter-0`,
type: 'label',