@instructure/ui-select 10.20.2-snapshot-7 → 10.20.2-snapshot-8

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.20.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-7) (2025-06-24)
+## [10.20.2-snapshot-8](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-8) (2025-06-24)
 
-**Note:** Version bump only for package @instructure/ui-select
+
+### Bug Fixes
+
+* **ui-select:** prevent scrolling when last item is hovered in Chrome ([51cd81a](https://github.com/instructure/instructure-ui/commit/51cd81a5360bbbc78d30e7e2489bb0c02b67a470))
 
 
 

package/es/Select/index.js

@@ -79,6 +79,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Select = class Select extends Component {
   constructor(...args) {
     super(...args);
+    this.SCROLL_TOLERANCE = 0.5;
     this.state = {
       hasInputRef: false
     };
@@ -391,7 +392,9 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     const viewProps = isShowingOptions ? {
       display: 'block',
       overflowY: 'auto',
-      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount,
+      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount - (
+      // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+      utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
       maxWidth: optionsMaxWidth || this.width,
       background: 'primary',
       elementRef: node => this._listView = node,

package/lib/Select/index.js

@@ -91,6 +91,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Select = class Select extends _react.Component {
   constructor(...args) {
     super(...args);
+    this.SCROLL_TOLERANCE = 0.5;
     this.state = {
       hasInputRef: false
     };
@@ -403,7 +404,9 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     const viewProps = isShowingOptions ? {
       display: 'block',
       overflowY: 'auto',
-      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount,
+      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount - (
+      // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+      utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
       maxWidth: optionsMaxWidth || this.width,
       background: 'primary',
       elementRef: node => this._listView = node,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "10.20.2-snapshot-7",
+  "version": "10.20.2-snapshot-8",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.20.2-snapshot-7",
-    "@instructure/ui-color-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-scripts": "10.20.2-snapshot-7",
-    "@instructure/ui-test-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-themes": "10.20.2-snapshot-7",
+    "@instructure/ui-babel-preset": "10.20.2-snapshot-8",
+    "@instructure/ui-color-utils": "10.20.2-snapshot-8",
+    "@instructure/ui-scripts": "10.20.2-snapshot-8",
+    "@instructure/ui-test-utils": "10.20.2-snapshot-8",
+    "@instructure/ui-themes": "10.20.2-snapshot-8",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -35,22 +35,22 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.20.2-snapshot-7",
-    "@instructure/shared-types": "10.20.2-snapshot-7",
-    "@instructure/ui-dom-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-form-field": "10.20.2-snapshot-7",
-    "@instructure/ui-icons": "10.20.2-snapshot-7",
-    "@instructure/ui-options": "10.20.2-snapshot-7",
-    "@instructure/ui-popover": "10.20.2-snapshot-7",
-    "@instructure/ui-position": "10.20.2-snapshot-7",
-    "@instructure/ui-prop-types": "10.20.2-snapshot-7",
-    "@instructure/ui-react-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-selectable": "10.20.2-snapshot-7",
-    "@instructure/ui-testable": "10.20.2-snapshot-7",
-    "@instructure/ui-text-input": "10.20.2-snapshot-7",
-    "@instructure/ui-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-view": "10.20.2-snapshot-7",
-    "@instructure/uid": "10.20.2-snapshot-7",
+    "@instructure/emotion": "10.20.2-snapshot-8",
+    "@instructure/shared-types": "10.20.2-snapshot-8",
+    "@instructure/ui-dom-utils": "10.20.2-snapshot-8",
+    "@instructure/ui-form-field": "10.20.2-snapshot-8",
+    "@instructure/ui-icons": "10.20.2-snapshot-8",
+    "@instructure/ui-options": "10.20.2-snapshot-8",
+    "@instructure/ui-popover": "10.20.2-snapshot-8",
+    "@instructure/ui-position": "10.20.2-snapshot-8",
+    "@instructure/ui-prop-types": "10.20.2-snapshot-8",
+    "@instructure/ui-react-utils": "10.20.2-snapshot-8",
+    "@instructure/ui-selectable": "10.20.2-snapshot-8",
+    "@instructure/ui-testable": "10.20.2-snapshot-8",
+    "@instructure/ui-text-input": "10.20.2-snapshot-8",
+    "@instructure/ui-utils": "10.20.2-snapshot-8",
+    "@instructure/ui-view": "10.20.2-snapshot-8",
+    "@instructure/uid": "10.20.2-snapshot-8",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Select/index.tsx

@@ -133,6 +133,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 @testable()
 class Select extends Component<SelectProps> {
   static readonly componentId = 'Select'
+  private readonly SCROLL_TOLERANCE = 0.5
 
   static allowedProps = allowedProps
   static propTypes = propTypes
@@ -527,7 +528,10 @@ class Select extends Component<SelectProps> {
           display: 'block',
           overflowY: 'auto',
           maxHeight:
-            optionsMaxHeight || this._optionHeight * visibleOptionsCount!,
+            optionsMaxHeight ||
+            this._optionHeight * visibleOptionsCount! -
+              // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+              (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
           maxWidth: optionsMaxWidth || this.width,
           background: 'primary',
           elementRef: (node: Element | null) => (this._listView = node),