Merge branch 'master' of github.com:mantinedev/mantine into next-minor

mantinedev · Mar 28, 2022 · f8239f4 · f8239f4
2 parents d26592b + 5f900f0
commit f8239f4
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx b/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx
@@ -434,6 +434,40 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
           break;
         }
 
+        case 'Home': {
+          if (!searchable) {
+            event.preventDefault();
+
+            if (!dropdownOpened) {
+              setDropdownOpened(true);
+            }
+
+            const firstItemIndex = filteredData.findIndex((item) => !item.disabled);
+            setHovered(firstItemIndex);
+            scrollIntoView({
+              alignment: isColumn ? 'end' : 'start',
+            });
+          }
+          break;
+        }
+
+        case 'End': {
+          if (!searchable) {
+            event.preventDefault();
+
+            if (!dropdownOpened) {
+              setDropdownOpened(true);
+            }
+
+            const lastItemIndex = filteredData.map((item) => !!item.disabled).lastIndexOf(false);
+            setHovered(lastItemIndex);
+            scrollIntoView({
+              alignment: isColumn ? 'end' : 'start',
+            });
+          }
+          break;
+        }
+
         case 'Escape': {
           setDropdownOpened(false);
         }

diff --git a/src/mantine-core/src/components/Select/Select.tsx b/src/mantine-core/src/components/Select/Select.tsx
@@ -419,6 +419,40 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props: SelectPr
         break;
       }
 
+      case 'Home': {
+        if (!searchable) {
+          event.preventDefault();
+
+          if (!dropdownOpened) {
+            setDropdownOpened(true);
+          }
+
+          const firstItemIndex = filteredData.findIndex((item) => !item.disabled);
+          setHovered(firstItemIndex);
+          scrollIntoView({
+            alignment: isColumn ? 'end' : 'start',
+          });
+        }
+        break;
+      }
+
+      case 'End': {
+        if (!searchable) {
+          event.preventDefault();
+
+          if (!dropdownOpened) {
+            setDropdownOpened(true);
+          }
+
+          const lastItemIndex = filteredData.map((item) => !!item.disabled).lastIndexOf(false);
+          setHovered(lastItemIndex);
+          scrollIntoView({
+            alignment: isColumn ? 'end' : 'start',
+          });
+        }
+        break;
+      }
+
       case 'Escape': {
         event.preventDefault();
         setDropdownOpened(false);