Relationship input enchancements clean (#5216)

* space saving label, use floatingdom to position dropdown

* cleanup

* cleanup

* lint

* changelog

Author: stuartromanek

.changeset/cyan-cases-stick.md

@@ -0,0 +1,5 @@
+---
+"apostrophe": patch
+---
+
+Relationship input's autocomplete list now positioned with floating-ui

packages/apostrophe/modules/@apostrophecms/i18n/i18n/de.json

@@ -89,6 +89,7 @@
   "breakpointPreviewMobile": "Mobil",
   "breakpointPreviewSelect": "Wählen Sie den Haltepunkt",
   "breakpointPreviewTablet": "Tablet",
+  "browse": "Durchsuchen",
   "browseDocType": "{{ type }} durchsuchen",
   "cancel": "Abbrechen",
   "cannotChangeSlugPrefix": "Der Slug-Präfix kann nicht geändert werden.",

packages/apostrophe/modules/@apostrophecms/i18n/i18n/en.json

@@ -90,6 +90,7 @@
   "breakpointPreviewMobile": "Mobile",
   "breakpointPreviewSelect": "Select Breakpoint",
   "breakpointPreviewTablet": "Tablet",
+  "browse": "Browse",
   "browseDocType": "Browse {{ type }}",
   "cancel": "Cancel",
   "cannotChangeSlugPrefix": "cannot change the slug prefix",

packages/apostrophe/modules/@apostrophecms/i18n/i18n/es.json

@@ -88,6 +88,7 @@
   "breakpointPreviewMobile": "Móvil",
   "breakpointPreviewSelect": "Seleccione el punto de interrupción",
   "breakpointPreviewTablet": "Tableta",
+  "browse": "Navegar",
   "browseDocType": "Navegar {{ type }}",
   "cancel": "Cancelar",
   "cannotChangeSlugPrefix": "No se puede cambiar el prefijo del slug",

packages/apostrophe/modules/@apostrophecms/i18n/i18n/fr.json

@@ -88,6 +88,7 @@
   "breakpointPreviewMobile": "Mobile",
   "breakpointPreviewSelect": "Sélectionner le point d'arrêt",
   "breakpointPreviewTablet": "Tablette",
+  "browse": "Parcourir",
   "browseDocType": "Parcourir {{ type }}",
   "cancel": "Annuler",
   "cannotChangeSlugPrefix": "Impossible de changer le préfixe du slug",

packages/apostrophe/modules/@apostrophecms/i18n/i18n/it.json

@@ -88,6 +88,7 @@
   "breakpointPreviewMobile": "Mobile",
   "breakpointPreviewSelect": "Seleziona Breakpoint",
   "breakpointPreviewTablet": "Tablet",
+  "browse": "Sfoglia",
   "browseDocType": "Sfoglia {{ type }}",
   "cancel": "Annulla",
   "cannotChangeSlugPrefix": "impossibile cambiare il prefisso dello slug",

packages/apostrophe/modules/@apostrophecms/i18n/i18n/pt-BR.json

@@ -88,6 +88,7 @@
   "breakpointPreviewMobile": "Mobile",
   "breakpointPreviewSelect": "Selecione o ponto de interrupção",
   "breakpointPreviewTablet": "Tablet",
+  "browse": "Navegar",
   "browseDocType": "Navegar em {{ type }}",
   "cancel": "Cancelar",
   "cannotChangeSlugPrefix": "não pode mudar o prefixo do slug",

packages/apostrophe/modules/@apostrophecms/i18n/i18n/sk.json

@@ -88,6 +88,7 @@
   "breakpointPreviewMobile": "Mobil",
   "breakpointPreviewSelect": "Vyberte bod prerušenia",
   "breakpointPreviewTablet": "Tablet",
+  "browse": "Prehliadať",
   "browseDocType": "Prehliadať {{ type }}",
   "cancel": "Zrušiť",
   "cannotChangeSlugPrefix": "nemôže zmeniť predvoľbu -",

packages/apostrophe/modules/@apostrophecms/schema/ui/apos/components/AposInputRelationship.vue

@@ -31,6 +31,7 @@
           <input
             v-if="!modifiers.includes('no-search')"
             :id="uid"
+            ref="input"
             v-model="searchTerm"
             class="apos-input apos-input--text apos-input--relationship"
             type="text"
@@ -70,19 +71,25 @@
           @update:model-value="updateSelected"
           @item-clicked="editRelationship"
         />
-        <AposSearchList
-          :aria-id="`apos-relationship-${field._id}`"
-          :list="searchList"
-          :selected-items="next"
-          :icon="field.suggestionIcon"
-          :icon-size="field.suggestionIconSize"
-          :fields="suggestionFields"
-          :focus-index="searchFocusIndex"
-          :suggestion="searchSuggestion"
-          :hint="searchHint"
-          disabled-tooltip="apostrophe:publishBeforeUsingTooltip"
-          @select="updateSelected"
-        />
+        <div
+          v-show="searchList.length"
+          ref="floatingList"
+          class="apos-input-relationship__search-list"
+        >
+          <AposSearchList
+            :aria-id="`apos-relationship-${field._id}`"
+            :list="searchList"
+            :selected-items="next"
+            :icon="field.suggestionIcon"
+            :icon-size="field.suggestionIconSize"
+            :fields="suggestionFields"
+            :focus-index="searchFocusIndex"
+            :suggestion="searchSuggestion"
+            :hint="searchHint"
+            disabled-tooltip="apostrophe:publishBeforeUsingTooltip"
+            @select="updateSelected"
+          />
+        </div>
       </div>
     </template>
   </AposInputWrapper>
@@ -97,6 +104,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .apos-input-relationship__search-list {
+    z-index: $z-index-notifications;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: max-content;
+  }
+
   .apos-input-relationship__input-wrapper {
     // Disable z-index because it breaks context menus that originate from
     // a fixed position elements (AposModalLip).

packages/apostrophe/modules/@apostrophecms/schema/ui/apos/components/AposSearchList.vue

@@ -1,6 +1,5 @@
 <template>
   <ul
-    v-show="list.length"
     :id="ariaId"
     :aria-hidden="!list.length"
     role="listbox"
@@ -99,8 +98,6 @@ export default {
 
 <style lang="scss" scoped>
 .apos-search {
-  z-index: calc(#{$z-index-widget-focused-controls} + 1);
-  position: absolute;
   overflow: auto;
   box-sizing: border-box;
   width: 100%;