prepare basecoat 1.0 migration

src/js/combobox.js

@@ -28,6 +28,17 @@
     const getValue = option => option.dataset.value ?? option.textContent.trim();
     const getLabel = option => option.dataset.label || option.textContent.trim();
 
+    const scrollOptionIntoListbox = (option) => {
+      const optionRect = option.getBoundingClientRect();
+      const listboxRect = listbox.getBoundingClientRect();
+
+      if (optionRect.top < listboxRect.top) {
+        listbox.scrollTop -= listboxRect.top - optionRect.top;
+      } else if (optionRect.bottom > listboxRect.bottom) {
+        listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
+      }
+    };
+
     const setActiveOption = (index) => {
       if (activeIndex > -1 && options[activeIndex]) {
         options[activeIndex].classList.remove('active');
@@ -238,7 +249,7 @@
 
       const nextOption = visibleOptions[nextVisibleIndex];
       setActiveOption(options.indexOf(nextOption));
-      nextOption.scrollIntoView({ block: 'nearest' });
+      scrollOptionIntoListbox(nextOption);
     };
 
     input.addEventListener('focus', openPopover);

src/js/command.js

@@ -19,6 +19,17 @@
     let visibleMenuItems = [...menuItems];
     let activeIndex = -1;
 
+    const scrollItemIntoMenu = (item) => {
+      const itemRect = item.getBoundingClientRect();
+      const menuRect = menu.getBoundingClientRect();
+
+      if (itemRect.top < menuRect.top) {
+        menu.scrollTop -= menuRect.top - itemRect.top;
+      } else if (itemRect.bottom > menuRect.bottom) {
+        menu.scrollTop += itemRect.bottom - menuRect.bottom;
+      }
+    };
+
     const setActiveItem = (index) => {
       if (activeIndex > -1 && menuItems[activeIndex]) {
         menuItems[activeIndex].classList.remove('active');
@@ -69,7 +80,7 @@
 
       if (visibleMenuItems.length > 0) {
         setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
-        visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
+        scrollItemIntoMenu(visibleMenuItems[0]);
       }
     };
 
@@ -119,7 +130,7 @@
       if (nextVisibleIndex !== currentVisibleIndex) {
         const newActiveItem = visibleMenuItems[nextVisibleIndex];
         setActiveItem(menuItems.indexOf(newActiveItem));
-        newActiveItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        scrollItemIntoMenu(newActiveItem);
       }
     };
 
@@ -147,7 +158,7 @@
 
     if (visibleMenuItems.length > 0) {
       setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
-      visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
+      scrollItemIntoMenu(visibleMenuItems[0]);
     }
 
     container.dataset.commandInitialized = true;

src/js/select.js

@@ -27,6 +27,17 @@
 
     const getValue = (opt) => opt.dataset.value ?? opt.textContent.trim();
 
+    const scrollOptionIntoListbox = (option) => {
+      const optionRect = option.getBoundingClientRect();
+      const listboxRect = listbox.getBoundingClientRect();
+
+      if (optionRect.top < listboxRect.top) {
+        listbox.scrollTop -= listboxRect.top - optionRect.top;
+      } else if (optionRect.bottom > listboxRect.bottom) {
+        listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
+      }
+    };
+
     const setActiveOption = (index) => {
       if (activeIndex > -1 && options[activeIndex]) {
         options[activeIndex].classList.remove('active');
@@ -238,7 +249,7 @@
       if (nextVisibleIndex !== currentVisibleIndex) {
         const newActiveOption = visibleOptions[nextVisibleIndex];
         setActiveOption(options.indexOf(newActiveOption));
-        newActiveOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        scrollOptionIntoListbox(newActiveOption);
       }
     };
 
@@ -273,7 +284,7 @@
       const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
       if (selectedOption) {
         setActiveOption(options.indexOf(selectedOption));
-        selectedOption.scrollIntoView({ block: 'nearest' });
+        scrollOptionIntoListbox(selectedOption);
       }
     };