diff --git a/start-client/src/components/common/dependency/Dialog.js b/start-client/src/components/common/dependency/Dialog.js index 3696c985fb6..7ca865678ac 100644 --- a/start-client/src/components/common/dependency/Dialog.js +++ b/start-client/src/components/common/dependency/Dialog.js @@ -119,12 +119,20 @@ function Dialog({ onClose }) { setSelected(0) setQuery('') textFocus() + requestAnimationFrame(scrollToLastAddedDependency) } - - const onKeyUp = event => { - if (event.keyCode === 91 || event.keyCode === 93 || event.keyCode === 17) { - setMultiple(false) - } + + const scrollToLastAddedDependency = () => { + const wrapperElement = get(wrapper, 'current') + const addedDependencies = wrapperElement.querySelectorAll('a.added') + if (!addedDependencies.length) return + const lastAddedDependency = addedDependencies[addedDependencies.length - 1] + const wrapperRect = wrapperElement.getBoundingClientRect() + const dependencyRect = lastAddedDependency.getBoundingClientRect() + wrapperElement.scrollBy({ + top: dependencyRect.top - wrapperRect.top - 40, + behavior: 'smooth' + }) } const updateScroll = () => { @@ -139,6 +147,12 @@ function Dialog({ onClose }) { } } + const onKeyUp = event => { + if (event.keyCode === 91 || event.keyCode === 93 || event.keyCode === 17) { + setMultiple(false) + } + } + const onKeyDown = event => { if (event.keyCode === 75 && (event.ctrlKey || event.metaKey)) { onClose()