From bee16a023de9b62a5f4bfa5226fc13a5ce40790a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 3 Mar 2022 21:53:33 +0000
Subject: [PATCH] Fixed Firefox not respecting default selected operator when
 changing filter type

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
---
 ghost/admin/app/components/members/filter.js | 34 +++++++++++---------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/components/members/filter.js b/ghost/admin/app/components/members/filter.js
index 9fd0a508ea..0cf355682b 100644
--- a/ghost/admin/app/components/members/filter.js
+++ b/ghost/admin/app/components/members/filter.js
@@ -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',