wip

public/app.css

@@ -3522,7 +3522,7 @@ select option[disabled]:first-child {
   border-radius: 0.25rem;
   padding-inline: 0.5rem;
 }
-[role=listbox] li:hover {
+[role=listbox] li:hover, [role=listbox] li.is-active {
   background-color: var(--spruce-base-color-primary);
   color: white;
 }

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=8db0273955e7aa0c97fff38a095769c7",
-    "/app.css": "/app.css?id=fc06152fb066f1ebc43b81fe60fb5c12"
+    "/app.js": "/app.js?id=fd20d54d831287b8dc7a5af9319b0952",
+    "/app.css": "/app.css?id=f6af34b1ec88e2d33d0784fddc7340a1"
 }

resources/js/Components/Form/AsyncSelect.vue

@@ -19,21 +19,29 @@
             @change="fetch"
         >
         <span class="field-feedback field-feedback--invalid" v-if="error">{{ error }}</span>
-        <ul v-show="isOpen" role="listbox">
+        <ul v-show="isOpen" role="listbox" style="z-index: 1000;">
             <li
                 ref="option"
                 v-for="(item, index) in response.data"
                 v-html="item.formatted_value"
+                tabindex="-1"
+                :aria-selected="index === active ? 'true' : 'false'"
+                :class="{ 'is-active': index === active }"
                 :key="item.value"
-                :class="[index === active ? 'is-active' : '']"
                 @mousedown="select(item.value)"
-                tabindex="-1"
-                aria-selected="false"
             ></li>
+            <li
+                v-if="response.data.length === 0"
+                aria-live="polite"
+                role="status"
+                class="field-feedback field-feedback--invalid"
+            >
+                {{ __('No items found for the given keyword.') }}
+            </li>
+        </ul>
+        <ul>
+
         </ul>
-        <div v-if="response.data.length === 0" aria-live="polite" role="status" class="field-feedback field-feedback--invalid">
-            {{ __('No items found for the given keyword.') }}
-        </div>
     </div>
 </template>
 
@@ -53,7 +61,7 @@
                 default: null,
             },
             modelValue: {
-                type: [String, Number, Array],
+                type: [String, Number, Array, Object],
                 default: null,
             },
             label: {
@@ -81,6 +89,7 @@
                 default: (value, options) => value,
             },
             value: {
+                type: [String, Number, Array, Object],
                 default: null,
             },
         },
@@ -121,6 +130,7 @@
                     this.selectResolver(value, JSON.parse(JSON.stringify(this.response.data)))
                 );
 
+
                 this.$nextTick(() => this.fetch());
             },
             select(index) {

resources/sass/sprucecss-expansion/_form.scss

@@ -225,7 +225,8 @@ select {
         border-radius: spruce.$border-radius-sm;
         padding-inline: spruce.spacer(xs);
 
-        &:hover {
+        &:hover,
+        &.is-active {
             background-color: spruce.color(primary);
             color: hsl(0 0% 100%);
         }

src/Fields/BelongsToMany.php

@@ -32,6 +32,19 @@ class BelongsToMany extends BelongsTo
      */
     protected array $resolved = [];
 
+    /**
+     * Set the async attribute.
+     *
+     * @param  bool  $value
+     * @return $this
+     */
+    public function async(bool $value = true): static
+    {
+        $this->async = $value;
+
+        return $this;
+    }
+
     /**
      * {@inheritdoc}
      */

src/RootServiceProvider.php

@@ -88,9 +88,12 @@ protected function registerPublishes(): void
 
         $this->publishes([
             __DIR__.'/../public' => public_path('vendor/root'),
+        ], 'root-compiled');
+
+        $this->publishes([
             __DIR__.'/../resources/js' => $this->app->resourcePath('js/vendor/root'),
             __DIR__.'/../resources/sass' => $this->app->resourcePath('sass/vendor/root'),
-        ], 'root-assets');
+        ], 'root-vendor');
 
         $this->publishes([
             __DIR__.'/../resources/views' => $this->app->resourcePath('views/vendor/root'),