fix site.dialog containing an auto-completer

like the study invite form dialog. It truncated the completion list due to the scrollable dialog div
lichess-org · May 9, 2024 · 8cb4289 · 8cb4289
1 parent 90147fc
commit 8cb4289
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/ui/@types/lichess/dialog.d.ts b/ui/@types/lichess/dialog.d.ts
@@ -22,6 +22,7 @@ interface DialogOpts {
   onClose?: (dialog: Dialog) => void; // called when dialog closes
   noCloseButton?: boolean; // if true, no upper right corner close button
   noClickAway?: boolean; // if true, no click-away-to-close
+  noScrollable?: boolean; // if true, no scrollable div container. Fixes dialogs containing an auto-completer
 }
 
 interface DomDialogOpts extends DialogOpts {

diff --git a/ui/analyse/src/study/inviteForm.ts b/ui/analyse/src/study/inviteForm.ts
@@ -64,6 +64,7 @@ export function view(ctrl: ReturnType<typeof makeCtrl>): VNode {
       ctrl.open(false);
       ctrl.redraw();
     },
+    noScrollable: true,
     vnodes: [
       h('h2', ctrl.trans.noarg('inviteToTheStudy')),
       h(

diff --git a/ui/site/src/dialog.ts b/ui/site/src/dialog.ts
@@ -34,7 +34,7 @@ export async function domDialog(o: DomDialogOpts): Promise<Dialog> {
   for (const [k, v] of Object.entries(o.attrs?.view ?? {})) view.setAttribute(k, String(v));
   if (html) view.innerHTML = html;
 
-  const scrollable = $as<Element>('<div class="scrollable">');
+  const scrollable = $as<Element>(`<div class="${o.noScrollable ? 'not-' : ''}scrollable">`);
   scrollable.appendChild(view);
   dialog.appendChild(scrollable);
 
@@ -66,7 +66,7 @@ export function snabDialog(o: SnabDialogOpts): VNode {
           h('button.close-button', { attrs: { 'data-icon': licon.X, 'aria-label': 'Close' } }),
         ),
       h(
-        'div.scrollable',
+        `div.${o.noScrollable ? 'not-' : ''}scrollable`,
         h(
           'div.dialog-content' +
             (o.class