diff --git a/packages/spotlight/CHANGELOG.md b/packages/spotlight/CHANGELOG.md index 432dce945d..7c1601621e 100644 --- a/packages/spotlight/CHANGELOG.md +++ b/packages/spotlight/CHANGELOG.md @@ -4,6 +4,14 @@ The following is a curated list of changes in the Enact spotlight module, newest ## [unreleased] +### Added + +- `spotlight` an optional `options.preventScroll` parameter to `focus` function to prevent scrolling by focus + +### Changed + +- Renamed `spotlight` an optional `containerOption` parameter of `focus` function to `options` to avoid misunderstandings + ### Fixed - `spotlight` to not require `less` dependency @@ -85,9 +93,6 @@ No significant changes. ## [4.7.6] - 2023-09-20 No significant changes. -## Changed -Added preventScroll parameter to `focusElement` for enhanced scroll control. -Extended `focus` in `spotlight/Spotlight` with a containerOption parameter that includes preventScroll. ## [4.7.5] - 2023-09-12 diff --git a/packages/spotlight/src/spotlight.js b/packages/spotlight/src/spotlight.js index 81a1a6db78..02d60cb980 100644 --- a/packages/spotlight/src/spotlight.js +++ b/packages/spotlight/src/spotlight.js @@ -197,7 +197,7 @@ const Spotlight = (function () { } } - function focusElement (elem, containerIds, fromPointer, preventScroll = false) { + function focusElement (elem, containerIds, fromPointer, preventScroll) { if (!elem) { return false; } @@ -214,8 +214,7 @@ const Spotlight = (function () { return true; } - const shouldPreventScroll = isWithinOverflowContainer(elem, containerIds) || preventScroll; - const focusOptions = shouldPreventScroll ? { preventScroll: true } : null; + const focusOptions = preventScroll || isWithinOverflowContainer(elem, containerIds) ? {preventScroll: true} : null; let silentFocus = function () { elem.focus(focusOptions); @@ -751,17 +750,19 @@ const Spotlight = (function () { * @param {String|Node} [elem] The spotlight ID or selector for either a spottable * component or a spotlight container, or spottable node. If not supplied, the default * container will be focused. - * @param {Object} [containerOption] The object including `enterTo`, `toOuterContainer`, and `preventScroll`. - * It works when the first parameter `elem` is either a spotlight container ID or a spotlight container node. - * @param {('last-focused'|'default-element'|'topmost')} [containerOption.enterTo] Specifies preferred + * @param {Object} [options] The object including `enterTo`, `toOuterContainer`, and `preventScroll`. + * `enterTo` and `toOuterContainer` work when the first parameter `elem` is either + * a spotlight container ID or a spotlight container node. + * @param {('last-focused'|'default-element'|'topmost')} [options.enterTo] Specifies preferred * `enterTo` configuration. - * @param {Boolean} [containerOption.toOuterContainer] If the proper target is not found, search one + * @param {Boolean} [options.toOuterContainer] If the proper target is not found, search one * recursively to outer container. - * @param {Boolean} [containerOption.preventScroll] Prevents automatic scrolling when focusing the element. + * @param {Boolean} [options.preventScroll] Prevents the focused element from an automatic scrolling + * into view after focusing the element. * @returns {Boolean} `true` if focus successful, `false` if not. * @public */ - focus: function (elem, containerOption = {}) { + focus: function (elem, options = {}) { let target = elem; let wasContainerId = false; let currentContainerNode = null; @@ -770,7 +771,7 @@ const Spotlight = (function () { target = getTargetByContainer(); } else if (typeof elem === 'string') { if (getContainerConfig(elem)) { - target = getTargetByContainer(elem, containerOption.enterTo); + target = getTargetByContainer(elem, options.enterTo); wasContainerId = true; currentContainerNode = getContainerNode(elem); } else if (/^[\w\d-]+$/.test(elem)) { @@ -780,14 +781,14 @@ const Spotlight = (function () { target = getTargetBySelector(elem); } } else if (isContainer(elem)) { - target = getTargetByContainer(getContainerId(elem), containerOption.enterTo); + target = getTargetByContainer(getContainerId(elem), options.enterTo); currentContainerNode = elem; } const nextContainerIds = getContainersForNode(target); const nextContainerId = last(nextContainerIds); if (isNavigable(target, nextContainerId, true)) { - const focused = focusElement(target, nextContainerIds, false, containerOption.preventScroll); + const focused = focusElement(target, nextContainerIds, false, options.preventScroll); if (!focused && wasContainerId) { setLastContainer(elem); @@ -800,11 +801,11 @@ const Spotlight = (function () { setLastContainer(elem); } - if (containerOption.toOuterContainer && currentContainerNode) { + if (options.toOuterContainer && currentContainerNode) { const outerContainer = getContainersForNode(currentContainerNode.parentElement).pop(); if (outerContainer) { - return this.focus(outerContainer, containerOption); + return this.focus(outerContainer, options); } } diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 65edaeb2ce..a272b69a60 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1413,7 +1413,6 @@ libraries. - Renamed `ui/Group` prop `select` to `childSelect` and added prop `select` to support selection types - ## [1.0.0-alpha.2] - 2016-10-21 This version includes a lot of refactoring from the previous release. Developers need to switch to the new enact-dev command-line tool.