From c9d0e22132ad72752ef1b545cac1f0b12b30479b Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 25 Jun 2022 14:13:17 +0100
Subject: [PATCH] Updated entity-selector-popup to reset on selection

Better links the core selector component to the popup version, with new
public methods for direct controlling.

For #3528
---
 resources/js/components/entity-selector-popup.js |  9 +++++++--
 resources/js/components/entity-selector.js       | 10 ++++++++++
 resources/views/entities/selector.blade.php      |  3 ++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/entity-selector-popup.js b/resources/js/components/entity-selector-popup.js
index 231f1021f..fb74fa5b8 100644
--- a/resources/js/components/entity-selector-popup.js
+++ b/resources/js/components/entity-selector-popup.js
@@ -7,9 +7,9 @@ class EntitySelectorPopup {
     setup() {
         this.elem = this.$el;
         this.selectButton = this.$refs.select;
-        this.searchInput = this.$refs.searchInput;
 
         window.EntitySelectorPopup = this;
+        this.selectorEl = this.$refs.selector;
 
         this.callback = null;
         this.selection = null;
@@ -22,13 +22,17 @@ class EntitySelectorPopup {
     show(callback) {
         this.callback = callback;
         this.elem.components.popup.show();
-        this.searchInput.focus();
+        this.getSelector().focusSearch();
     }
 
     hide() {
         this.elem.components.popup.hide();
     }
 
+    getSelector() {
+        return this.selectorEl.components['entity-selector'];
+    }
+
     onSelectButtonClick() {
         this.hide();
         if (this.selection !== null && this.callback) this.callback(this.selection);
@@ -36,6 +40,7 @@ class EntitySelectorPopup {
 
     onSelectionConfirm(entity) {
         this.hide();
+        this.getSelector().reset();
         if (this.callback && entity) this.callback(entity);
     }
 
diff --git a/resources/js/components/entity-selector.js b/resources/js/components/entity-selector.js
index 6d9d06f86..e2596998a 100644
--- a/resources/js/components/entity-selector.js
+++ b/resources/js/components/entity-selector.js
@@ -87,6 +87,16 @@ class EntitySelector {
         }
     }
 
+    reset() {
+        this.searchInput.value = '';
+        this.showLoading();
+        this.initialLoad();
+    }
+
+    focusSearch() {
+        this.searchInput.focus();
+    }
+
     showLoading() {
         this.loading.style.display = 'block';
         this.resultsContainer.style.display = 'none';
diff --git a/resources/views/entities/selector.blade.php b/resources/views/entities/selector.blade.php
index 5285b0ec4..45fae4707 100644
--- a/resources/views/entities/selector.blade.php
+++ b/resources/views/entities/selector.blade.php
@@ -1,10 +1,11 @@
 <div class="form-group entity-selector-container">
     <div component="entity-selector"
+         refs="entity-selector-popup@selector"
          class="entity-selector {{$selectorSize ?? ''}}"
          option:entity-selector:entity-types="{{ $entityTypes ?? 'book,chapter,page' }}"
          option:entity-selector:entity-permission="{{ $entityPermission ?? 'view' }}">
         <input refs="entity-selector@input" type="hidden" name="{{$name}}" value="">
-        <input refs="entity-selector@search entity-selector-popup@searchInput" type="text" placeholder="{{ trans('common.search') }}" @if($autofocus ?? false) autofocus @endif>
+        <input refs="entity-selector@search" type="text" placeholder="{{ trans('common.search') }}" @if($autofocus ?? false) autofocus @endif>
         <div class="text-center loading" refs="entity-selector@loading">@include('common.loading-icon')</div>
         <div refs="entity-selector@results"></div>
         @if($showAdd ?? false)