fix: mentions list not showing on the edit mode

app/Livewire/Autocomplete.php

@@ -18,6 +18,11 @@
  */
 final class Autocomplete extends Component
 {
+    /**
+     * The component id used for scoping events.
+     */
+    public string $componentId = '';
+
     /**
      * An array of matched type aliases (like ["mentions", ...]).
      *

resources/js/autocomplete.js

@@ -1,4 +1,5 @@
 export const autocomplete = (config) => ({
+    componentId: null,
     types: null,
     matchedTypes: null,
     showAutocompleteOptions: false,
@@ -8,16 +9,17 @@ export const autocomplete = (config) => ({
     listeners: [],
 
     init() {
+        this.componentId = config.componentId;
         this.types = config.types;
         this.initListeners();
     },
 
     initListeners() {
-        this.listeners.push(Livewire.on('autocompleteBoundInputKeyup', (payload) => {this.handleInput(payload)}));
-        this.listeners.push(Livewire.on('autocompleteBoundInputArrowUp', (event) => this.focusResultsUp()));
-        this.listeners.push(Livewire.on('autocompleteBoundInputArrowDown', (event) => this.focusResultsDown()));
-        this.listeners.push(Livewire.on('selectAutocomplete', (event) => this.select()));
-        this.listeners.push(Livewire.on('closeAutocompletePanel', (event) => this.closeResults()));
+        this.listeners.push(Livewire.on(`${this.componentId}:autocompleteBoundInputKeyup`, (payload) => {this.handleInput(payload)}));
+        this.listeners.push(Livewire.on(`${this.componentId}:autocompleteBoundInputArrowUp`, (event) => this.focusResultsUp()));
+        this.listeners.push(Livewire.on(`${this.componentId}:autocompleteBoundInputArrowDown`, (event) => this.focusResultsDown()));
+        this.listeners.push(Livewire.on(`${this.componentId}:selectAutocomplete`, (event) => this.select()));
+        this.listeners.push(Livewire.on(`${this.componentId}:closeAutocompletePanel`, (event) => this.closeResults()));
     },
 
     handleInput(payload) {
@@ -79,7 +81,7 @@ export const autocomplete = (config) => ({
     select(replacement) {
         replacement ??= this.getReplacementFromSelectedResult() ?? this.activeToken.word;
 
-        Livewire.dispatch('autocompleteSelected', {
+        Livewire.dispatch(`${this.componentId}:autocompleteSelected`, {
             newValue: this.formatReplacement(replacement)
         })
 
@@ -116,13 +118,13 @@ export const autocomplete = (config) => ({
 
     openResults() {
         this.showAutocompleteOptions = true;
-        Livewire.dispatch('autocompletePanelShown');
+        Livewire.dispatch(`${this.componentId}:autocompletePanelShown`);
     },
 
     closeResults() {
         this.showAutocompleteOptions = false;
         this.selectedIndex = 0;
-        Livewire.dispatch('autocompletePanelClosed');
+        Livewire.dispatch(`${this.componentId}:autocompletePanelClosed`);
     },
 
     focusResultsUp() {
@@ -152,14 +154,14 @@ export const autocomplete = (config) => ({
     },
 });
 
-export const usesAutocomplete = () => ({
+export const usesAutocomplete = (componentId) => ({
     autocompletePanelIsShown: false,
     listeners: [],
 
     init() {
-        Livewire.on('autocompletePanelShown', () => this.autocompletePanelIsShown = true);
-        Livewire.on('autocompletePanelClosed', () => this.autocompletePanelIsShown = false);
-        Livewire.on('autocompleteSelected', (event) => {
+        Livewire.on(`${componentId}:autocompletePanelShown`, () => this.autocompletePanelIsShown = true);
+        Livewire.on(`${componentId}:autocompletePanelClosed`, () => this.autocompletePanelIsShown = false);
+        Livewire.on(`${componentId}:autocompleteSelected`, (event) => {
             this.$focus.focus(this.$el);
 
             this.$nextTick(() => {
@@ -171,45 +173,45 @@ export const usesAutocomplete = () => ({
 
     autocompleteInputBindings: {
         ['@keyup.debounce.250ms'](event) {
-            Livewire.dispatch('autocompleteBoundInputKeyup', {
+            Livewire.dispatch(`${componentId}:autocompleteBoundInputKeyup`, {
                 content: this.$el.value,
                 event: event,
             })
         },
         ['@keydown.arrow-up'](event) {
             if (this.autocompletePanelIsShown) {
                 event.preventDefault();
-                Livewire.dispatch('autocompleteBoundInputArrowUp')
+                Livewire.dispatch(`${componentId}:autocompleteBoundInputArrowUp`)
             }
         },
         ['@keydown.arrow-down'](event) {
             if (this.autocompletePanelIsShown) {
                 event.preventDefault();
-                Livewire.dispatch('autocompleteBoundInputArrowDown')
+                Livewire.dispatch(`${componentId}:autocompleteBoundInputArrowDown`)
             }
         },
         ['@keydown.enter'](event) {
             if (this.autocompletePanelIsShown) {
                 event.preventDefault();
-                Livewire.dispatch('selectAutocomplete')
+                Livewire.dispatch(`${componentId}:selectAutocomplete`)
             }
         },
         ['@keydown.tab'](event) {
             if (this.autocompletePanelIsShown) {
                 event.preventDefault();
-                Livewire.dispatch('selectAutocomplete')
+                Livewire.dispatch(`${componentId}:selectAutocomplete`)
             }
         },
         ['@keydown.escape'](event) {
             if (this.autocompletePanelIsShown) {
                 event.preventDefault();
-                Livewire.dispatch('closeAutocompletePanel')
+                Livewire.dispatch(`${componentId}:closeAutocompletePanel`)
             }
         },
         ['@click.away'](event) {
             if (this.autocompletePanelIsShown) {
                 event.preventDefault();
-                Livewire.dispatch('closeAutocompletePanel')
+                Livewire.dispatch(`${componentId}:closeAutocompletePanel`)
             }
         },
     },

resources/views/components/textarea.blade.php

@@ -1,14 +1,17 @@
-@props(['autocomplete' => false])
+@props(['autocomplete' => false, 'id' => null])
+@php
+    $componentId = $id ?? Str::uuid();
+@endphp
 <textarea
     {!! $attributes->merge(['class' => 'w-full dark:text-white text-black dark:caret-white caret-black focus:border-pink-500 dark:border-slate-800 border-slate-300 dark:bg-slate-900/50 bg-slate-50/50 backdrop-blur-sm dark:focus:ring-slate-900 focus:ring-slate-100 rounded-lg shadow-sm sm:text-sm']) !!}
     @if ($autocomplete === true)
-        x-data="usesDynamicAutocomplete"
+        x-data="usesDynamicAutocomplete('{{ $componentId }}')"
         x-bind="autocompleteInputBindings"
     @endif
 >
     {{ $slot }}
 </textarea>
 
 @if ($autocomplete === true)
-<livewire:autocomplete></livewire:autocomplete>
+<livewire:autocomplete :componentId="$componentId"></livewire:autocomplete>
 @endif

resources/views/livewire/autocomplete.blade.php

@@ -1,5 +1,5 @@
 <div
-    x-data="dynamicAutocomplete({ types: @js($this->autocompleteTypes) })"
+    x-data="dynamicAutocomplete({ types: @js($this->autocompleteTypes), componentId: '{{ $componentId }}' })"
     x-cloak
     x-show="showAutocompleteOptions"
 >

resources/views/livewire/questions/edit.blade.php

@@ -1,4 +1,4 @@
-<div class="border-l dark:border-slate-900 border-slate-200">
+<div>
     <form wire:submit="update">
         <div class="mt-4 flex items-center justify-between">
             <div class="w-full">
@@ -9,15 +9,16 @@ class="sr-only"
                         >Answer</label
                     >
 
-                    <textarea
+                    <x-textarea
                         id="{{ 'answer_question_'.$question->id }}"
                         wire:model="answer"
                         x-autosize
                         class="h-24 w-full resize-none border-none border-transparent bg-transparent dark:text-white text-black focus:border-transparent focus:outline-0 focus:ring-0"
                         placeholder="Write your answer..."
                         maxlength="1000"
                         rows="3"
-                    ></textarea>
+                        autocomplete
+                    ></x-textarea>
 
                     <p class="text-right text-xs text-slate-400"><span x-text="$wire.answer.length"></span> / 1000</p>