🐛 Fixed removed tags not showing in dropdown in editor sidebar (#25262)

fixes #25020

Fixed tag disappearing from the dropdown after removal in the post
editor. When a tag was removed while the tags dropdown was open, it
would disappear from the available options until the editor was closed
and reopened. This is now fixed by comparing tag IDs instead of object
references.

---------

Co-authored-by: Steve Larson <9larsons@gmail.com>

Author: abdultalha0862

ghost/admin/app/components/gh-tags-token-input.js

@@ -24,12 +24,14 @@ export default class GhTagsTokenInput extends Component {
 
     constructor() {
         super(...arguments);
-        this.addInitialTags(this.args.selected?.toArray ? this.args.selected.toArray() : (this.args.selected || []));
+        const selectedTags = this.args.selected?.toArray ? this.args.selected.toArray() : (this.args.selected || []);
+        this._initialTags = new TrackedArray(selectedTags);
     }
 
     get availableTags() {
         const selectedTags = this.args.selected || [];
-        return this.tagsManager.sortTags(this._initialTags.filter(tag => !selectedTags.includes(tag)));
+        const selectedTagIds = new Set(selectedTags.map(tag => tag.id));
+        return this.tagsManager.sortTags(this._initialTags.filter(tag => !selectedTagIds.has(tag.id)));
     }
 
     // if we only have one page of tags available or we've already loaded all tags
@@ -43,15 +45,15 @@ export default class GhTagsTokenInput extends Component {
 
     @action
     addInitialTags(tags) {
-        const selectedTags = this.args.selected || [];
-        const deduplicatedTags = tags.filter(tag => !selectedTags.includes(tag));
+        const existingTagIds = new Set(this._initialTags.map(tag => tag.id));
+        const deduplicatedTags = tags.filter(tag => !existingTagIds.has(tag.id));
         this._initialTags.push(...deduplicatedTags);
     }
 
     @action
     addSearchedTags(tags) {
-        const selectedTags = this.args.selected || [];
-        const deduplicatedTags = tags.filter(tag => !selectedTags.includes(tag));
+        const selectedTagIds = new Set((this.args.selected || []).map(tag => tag.id));
+        const deduplicatedTags = tags.filter(tag => !selectedTagIds.has(tag.id));
         this._searchedTags.push(...deduplicatedTags);
     }
 

ghost/admin/tests/integration/components/gh-psm-tags-input-test.js

@@ -79,6 +79,28 @@ describe('Integration: Component: gh-psm-tags-input', function () {
         expect(options[3]).to.contain.text('Tag 4');
     });
 
+    it('shows a removed tag in the options list again', async function () {
+        await assignPostWithTags(this, 'one', 'three');
+        await render(hbs`<GhPsmTagsInput @post={{post}} />`);
+        await clickTrigger();
+        await settled();
+        await waitUntil(() => findAll('.ember-power-select-option').length >= 2);
+
+        let options = findAll('.ember-power-select-option');
+        expect(options.length).to.equal(2);
+        expect(options[0]).to.contain.text('#Tag 2');
+        expect(options[1]).to.contain.text('Tag 4');
+
+        // remove the "Tag 1" token then re-open the dropdown
+        await click('.ember-power-select-multiple-remove-btn');
+        await clickTrigger();
+        await settled();
+
+        options = findAll('.ember-power-select-option');
+        expect(options.length).to.equal(3);
+        expect(options[0]).to.contain.text('Tag 1');
+    });
+
     it('uses local search if all tags have been loaded in first page', async function () {
         this.set('post', this.store.findRecord('post', 1));
         await settled();
@@ -185,7 +207,20 @@ describe('Integration: Component: gh-psm-tags-input', function () {
     });
 
     describe('server-side search', function () {
+        it('excludes selected tags from search results', async function () {
+            server.create('tag', {name: 'Alpha', slug: 'alpha'});
+            server.createList('tag', 150, {name: i => `Search ${i.toString().padStart(3, '0')}`});
+
+            await assignPostWithTags(this, 'alpha');
+            await render(hbs`<GhPsmTagsInput @post={{post}} />`);
+            await clickTrigger();
+            await typeInSearch('Alph');
+            await settled();
 
+            let options = findAll('.ember-power-select-option');
+            expect(options.length).to.equal(1);
+            expect(options[0]).to.contain.text('Add "Alph"...');
+        });
     });
 
     it('highlights internal tags', async function () {