Fixes #4659 - Organization field in 'Change customer' dialog is not always functional.

app/assets/javascripts/app/controllers/_ui_element/autocompletion_ajax_customer_organization.coffee

@@ -9,16 +9,17 @@ class App.UiElement.autocompletion_ajax_customer_organization
 
     # selectable search
     searchableAjaxSelectObject = new App.CustomerOrganizationAjaxSelect(
-      delegate:      form
+      delegate:        form
       attribute:
-        value:       params[attribute.name] || attribute.value
-        valueName:   valueName
-        name:        attribute.name
-        id:          params.organization_id || attribute.id
-        placeholder: App.i18n.translateInline('Search…')
-        limit:       40
-        relation:    attribute.relation
-        ajax:        true
-        multiple:    attribute.multiple
+        value:         params[attribute.name] || attribute.value
+        valueName:     valueName
+        name:          attribute.name
+        id:            params.organization_id || attribute.id
+        placeholder:   App.i18n.translateInline('Search…')
+        limit:         40
+        relation:      attribute.relation
+        ajax:          true
+        multiple:      attribute.multiple
+        showArrowIcon: true
     )
     searchableAjaxSelectObject.element()

app/assets/javascripts/app/controllers/ticket_customer.coffee

@@ -10,11 +10,11 @@ class App.TicketCustomer extends App.ControllerModal
       organization_id: { name: 'organization_id', display: __('Organization'), tag: 'autocompletion_ajax_customer_organization', multiple: false, null: false, relation: 'Organization', autocapitalize: false, translate: false },
     }
     @controller = new App.ControllerForm(
-      model: App.Ticket
+      model:           App.Ticket
       mixedAttributes: configure_attributes
-      screen: 'edit'
-      autofocus:      true,
-      handlersConfig: [App.TicketZoomFormHandlerMultiOrganization],
+      screen:          'edit'
+      autofocus:       true,
+      handlersConfig:  [App.TicketZoomFormHandlerMultiOrganization],
     )
     @controller.form
 

app/assets/javascripts/app/controllers/ticket_zoom/form_handler_multi_organization.coffee

@@ -22,6 +22,6 @@ class App.TicketZoomFormHandlerMultiOrganization
       if customer.organization_id
         customer_organization = App.Organization.find(customer.organization_id)
         if customer_organization
-          organization_id.get(0).selectValue(customer_organization.id, customer_organization.name)
+          organization_id.get(0).selectValue(customer_organization.id, customer_organization.name, true)
 
 App.Config.set('200-MultiOrganization', App.TicketZoomFormHandlerMultiOrganization, 'TicketCreateFormHandler')

app/assets/javascripts/app/lib/app_post/searchable_select.coffee

@@ -293,7 +293,11 @@ class App.SearchableSelect extends Spine.Controller
     @visiblePart.text('')
     @invisiblePart.text('')
 
-  selectValue: (key, value) =>
+  selectValue: (key, value, loadData = false) =>
+    if loadData
+      @input.val ''
+      @onInput(null, false)
+
     @input.val value
     @shadowInput.val key
 
@@ -493,8 +497,8 @@ class App.SearchableSelect extends Spine.Controller
     @shadowInput.trigger('change')
     token.remove()
 
-  onInput: (event) =>
-    @toggle() if not @isOpen
+  onInput: (event, doToggle = true) =>
+    @toggle() if not @isOpen && doToggle
 
     @query = @input.val()
     @filterByQuery @query

app/assets/javascripts/app/views/generic/searchable_select.jst.eco

@@ -38,7 +38,7 @@
     <span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span>
     <span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span>
   </div>
-  <% if !@attribute.ajax: %><%- @Icon('arrow-down', 'dropdown-arrow') %><% end %>
+  <% if !@attribute.ajax or @attribute.showArrowIcon: %><%- @Icon('arrow-down', 'dropdown-arrow') %><% end %>
   <div class="small loading icon"></div>
 </div>
 <div class="dropdown-menu dropdown-menu-left dropdown-menu--has-submenu js-dropdown">

spec/system/ticket/zoom/change_customer_spec.rb

@@ -0,0 +1,38 @@
+# Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
+
+require 'rails_helper'
+
+RSpec.describe 'Ticket zoom > Sidebar > Customer', :aggregate_failures, type: :system do
+  let(:primary_organization)    { create(:organization) }
+  let(:secondary_organizations) { create_list(:organization, 3) }
+  let(:customer)                { create(:customer, organization: primary_organization, organizations: secondary_organizations) }
+  let(:ticket)                  { create(:ticket, group: Group.find_by(name: 'Users'), customer: customer) }
+
+  context "when using the sidebar to get current customer's information" do
+    before do
+      visit "#ticket/zoom/#{ticket.id}"
+    end
+
+    context 'when changing the customer/organization' do
+      it 'shows the organization field with all possible organizations' do
+        click '.tabsSidebar-tab[data-tab=customer]'
+        click '#userAction'
+        click_link 'Change Customer'
+        modal_ready
+
+        in_modal do
+          find('[name="customer_id"] ~ .user-select.token-input').fill_in with: customer.firstname
+
+          expect(page).to have_css('ul.recipientList > li.recipientList-entry', minimum: 1)
+
+          first('.recipientList-entry.js-object').click
+          expect(page).to have_css('[name="organization_id"]', visible: :all)
+
+          find('[data-attribute-name="organization_id"] .js-input').click
+
+          expect(page).to have_css('ul.js-optionsList > li.js-option', count: 4)
+        end
+      end
+    end
+  end
+end