diff --git a/_js/modules/inpagelink.js b/_js/modules/inpagelink.js index 454ca4430a..1bdf3c71d3 100644 --- a/_js/modules/inpagelink.js +++ b/_js/modules/inpagelink.js @@ -24,9 +24,24 @@ export function applyInPageLink(elTrigger) { } function focusOnInput(elId) { - const elIdInput = document.getElementById(elId).querySelectorAll('.input')[0] - elIdInput.focus() - return elId + const container = document.getElementById(elId); + console.log(container); + container.scrollIntoView(); + + const input = [ + ...container.getElementsByTagName('INPUT'), + ...container.getElementsByTagName('TEXTAREA'), + ...container.getElementsByTagName('SELECT'), + ].filter(input => { + const type = input.getAttribute('type'); + + return type !== 'readonly' && type !== 'hidden' && type !== 'checkbox' && type !== 'radio'; + })[0]; + + if (input) { + input.focus(); + } + return elId; } domready(inPageLink) diff --git a/_prototypes/end-to-end/assets/inpagelink.js b/_prototypes/end-to-end/assets/inpagelink.js new file mode 100644 index 0000000000..76dbc536bd --- /dev/null +++ b/_prototypes/end-to-end/assets/inpagelink.js @@ -0,0 +1,47 @@ +import domready from '../../../_js/modules/domready'; +import {forEach} from 'lodash' + +domready(() => { + +const classTrigger = 'js-inpagelink' + + +function inPageLink() { + const nodeList = document.getElementsByClassName(classTrigger) + forEach(nodeList, applyInPageLink) + return nodeList +} + +function applyInPageLink(elTrigger) { + const elId = elTrigger.getAttribute('href').replace('#', '') + elTrigger.addEventListener('click', (e) => { + e.preventDefault() + focusOnInput(elId) + }) + + return { elTrigger, elId } +} + +function focusOnInput(elId) { + const container = document.getElementById(elId).closest('.panel'); + container.scrollIntoView(); + + const input = [ + ...container.getElementsByTagName('INPUT'), + ...container.getElementsByTagName('TEXTAREA'), + ...container.getElementsByTagName('SELECT'), + ].filter(input => { + const type = input.getAttribute('type'); + + return type !== 'readonly' && type !== 'hidden' && type !== 'checkbox' && type !== 'radio'; + })[0]; + + if (input) { + input.focus(); + } + return elId; +} + +inPageLink(); + +}); diff --git a/_prototypes/end-to-end/bundle.js b/_prototypes/end-to-end/bundle.js index d52a6ca8b1..d120f359b7 100644 --- a/_prototypes/end-to-end/bundle.js +++ b/_prototypes/end-to-end/bundle.js @@ -18,6 +18,7 @@ import './assets/modules/address-input/address-input'; import './assets/modules/uac/uac'; import './assets/modules/character-check'; import './assets/previous-link'; +import './assets/inpagelink'; import { RELATIONSHIPS_STORAGE_KEY,