fix(loyalty): clear staff_id when autocomplete selection is removed

When a staff member was selected and then the name field was edited or
cleared, the staff_id (email) remained set. Now tracks the selected
member name and clears staff_id when the search text diverges.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-23 21:13:44 +01:00
parent 44a0c38016
commit 314360a394
2 changed files with 16 additions and 2 deletions

View File

@@ -62,6 +62,9 @@ function loyaltyPinsList(config) {
staffSearch: '', staffSearch: '',
showStaffDropdown: false, showStaffDropdown: false,
// Track which member was selected (to detect when user edits away)
_selectedStaffName: '',
get filteredStaff() { get filteredStaff() {
if (!this.staffSearch) return this.staffMembers; if (!this.staffSearch) return this.staffMembers;
const q = this.staffSearch.toLowerCase(); const q = this.staffSearch.toLowerCase();
@@ -75,13 +78,24 @@ function loyaltyPinsList(config) {
this.pinForm.name = member.full_name; this.pinForm.name = member.full_name;
this.pinForm.staff_id = member.email; this.pinForm.staff_id = member.email;
this.staffSearch = member.full_name; this.staffSearch = member.full_name;
this._selectedStaffName = member.full_name;
this.showStaffDropdown = false; this.showStaffDropdown = false;
}, },
onStaffSearchInput() {
this.pinForm.name = this.staffSearch;
// If user modified the text away from the selected member, clear staff_id
if (this._selectedStaffName && this.staffSearch !== this._selectedStaffName) {
this.pinForm.staff_id = '';
this._selectedStaffName = '';
}
},
clearStaffSelection() { clearStaffSelection() {
this.staffSearch = ''; this.staffSearch = '';
this.pinForm.name = ''; this.pinForm.name = '';
this.pinForm.staff_id = ''; this.pinForm.staff_id = '';
this._selectedStaffName = '';
this.showStaffDropdown = false; this.showStaffDropdown = false;
}, },

View File

@@ -136,7 +136,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label>
<input type="text" x-model="staffSearch" required <input type="text" x-model="staffSearch" required
@focus="open = staffMembers.length > 0" @focus="open = staffMembers.length > 0"
@input="open = staffMembers.length > 0; pinForm.name = staffSearch" @input="open = staffMembers.length > 0; onStaffSearchInput()"
autocomplete="off" autocomplete="off"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="{{ _('loyalty.shared.pins.pin_name') }}"> placeholder="{{ _('loyalty.shared.pins.pin_name') }}">
@@ -205,7 +205,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label>
<input type="text" x-model="staffSearch" required <input type="text" x-model="staffSearch" required
@focus="open = staffMembers.length > 0" @focus="open = staffMembers.length > 0"
@input="open = staffMembers.length > 0; pinForm.name = staffSearch" @input="open = staffMembers.length > 0; onStaffSearchInput()"
autocomplete="off" autocomplete="off"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="{{ _('loyalty.shared.pins.pin_name') }}"> placeholder="{{ _('loyalty.shared.pins.pin_name') }}">