Style the add-muc modal autocomplete

- Let it drop down to the bottom
- Add a border
- Let it scroll

src/plugins/muc-views/modals/add-muc.js

@@ -3,6 +3,8 @@ import BootstrapModal from "plugins/modal/base.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 
+import '../styles/add-muc-modal.scss';
+
 const u = converse.env.utils;
 const { Strophe } = converse.env;
 

src/plugins/muc-views/styles/add-muc-modal.scss

@@ -0,0 +1,8 @@
+#add-chatroom-modal {
+    converse-autocomplete {
+        .suggestion-box__results--below {
+            height: 10em;
+            overflow: auto;
+        }
+    }
+}

src/plugins/muc-views/templates/add-muc.js

@@ -37,8 +37,12 @@ export default (o) => {
                             ${ (o.muc_roomid_policy_error_msg) ? html`<label class="roomid-policy-error">${o.muc_roomid_policy_error_msg}</label>` : '' }
                             <converse-autocomplete
                                 .getAutoCompleteList="${getAutoCompleteList}"
+                                ?autofocus=${true}
+                                position="below"
                                 placeholder="${o.chatroom_placeholder}"
-                                name="chatroom"></converse-autocomplete>
+                                class="add-muc-autocomplete"
+                                name="chatroom">
+                            </converse-autocomplete>
                         </div>
                         ${ o.muc_roomid_policy_hint ?  html`<div class="form-group">${unsafeHTML(DOMPurify.sanitize(o.muc_roomid_policy_hint, {'ALLOWED_TAGS': ['b', 'br', 'em']}))}</div>` : '' }
                         ${ !api.settings.get('locked_muc_nickname') ? nickname_input(o) : '' }

src/shared/autocomplete/component.js

@@ -4,11 +4,12 @@ import { FILTER_CONTAINS, FILTER_STARTSWITH } from './utils.js';
 import { api } from '@converse/headless/core';
 import { html } from 'lit';
 
-
 /**
  * A custom element that can be used to add auto-completion suggestions to a form input.
  * @class AutoCompleteComponent
  *
+ * @property { "above" | "below" } [position="above"]
+ *  Should the autocomplete list show above or below the input element?
  * @property { Boolean } [autofocus=false]
  *  Should the `focus` attribute be set on the input element?
  * @property { Function } getAutoCompleteList
@@ -40,6 +41,7 @@ import { html } from 'lit';
 export default class AutoCompleteComponent extends CustomElement {
     static get properties () {
         return {
+            'position': { type: String },
             'autofocus': { type: Boolean },
             'getAutoCompleteList': { type: Function },
             'auto_evaluate': { type: Boolean },
@@ -49,13 +51,13 @@ export default class AutoCompleteComponent extends CustomElement {
             'min_chars': { type: Number },
             'name': { type: String },
             'placeholder': { type: String },
-            'triggers': { type: String }
+            'triggers': { type: String },
         };
     }
 
     constructor () {
         super();
-        this.position = "above";
+        this.position = 'above';
         this.auto_evaluate = true;
         this.auto_first = false;
         this.filter = 'contains';
@@ -67,9 +69,10 @@ export default class AutoCompleteComponent extends CustomElement {
     }
 
     render () {
+        const position_class = `suggestion-box__results--${this.position}`;
         return html`
             <div class="suggestion-box suggestion-box__name">
-                <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
+                <ul class="suggestion-box__results ${position_class}" hidden=""></ul>
                 <input
                     ?autofocus=${this.autofocus}
                     type="text"
@@ -100,12 +103,9 @@ export default class AutoCompleteComponent extends CustomElement {
             'list': () => this.getAutoCompleteList(),
             'match_current_word': true,
             'max_items': this.max_items,
-            'min_chars': this.min_chars
+            'min_chars': this.min_chars,
         });
-        this.auto_complete.on(
-            'suggestion-box-selectcomplete',
-            () => (this.auto_completing = false)
-        );
+        this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
     }
 
     onKeyDown (ev) {

src/shared/autocomplete/styles/_autocomplete.scss

@@ -40,7 +40,7 @@
                 z-index: -1;
             }
             border-radius: .3em;
-            border: 1px solid rgba(0,0,0,.3);
+            border: 1px solid var(--focus-color);
             box-shadow: .05em .2em .6em rgba(0,0,0,.1);
             box-sizing: border-box;
             left: 0;
@@ -65,7 +65,7 @@
             }
         }
         .suggestion-box__results--below {
-            top: 2em;
+            top: 3em;
         }
         .suggestion-box__results--above {
             bottom: 4.5em;