🐛 [#1121] focus-trap in Header and Search

[jiromaykin]

Issue: https://taiga.maykinmedia.nl/project/open-inwoner/issue/1121
Problem: propagation (bubbling) of events from the mobile menu into the dialog element that catches focus away from everything else.

Notes for learning:

Ways to inspect the constructor in file "open_inwoner/js/components/abstract/component.js":

constructor(node, initialState = {}) { console.log('Component constructor', node, initialState) [.....]

and

setState(changes) { console.log('setState', changes) [.....]

Ways to inspect the clickEvents in inspector: by using 'matches' in these 5 console-logs in file "open_inwoner/js/components/header/header.js":

bindEvents() { this.node.addEventListener('keyup', this.onKeyUp.bind(this)) this.node.addEventListener('click', (e) => { console.log('click in bindEvents') if ( e.target.matches('.header__button') || e.target.matches('.header__button *') ) { this.setState({ open: !this.state.open }) } }) }

2 & 3.

getButton() { console.log('getButton') return BEM.getChildBEMNode(this.node, BLOCK_HEADER, ELEMENT_BUTTON) } getSubMenu() { console.log('getSubMenu') return BEM.getChildBEMNode(this.node, BLOCK_HEADER, ELEMENT_SUBMENU) }

render(state) { console.log('render', state) document.body.classList.add('body') BEM.toggleModifier(document.body, MODIFIER_OPEN, state.open) BEM.toggleModifier(this.getButton(), MODIFIER_OPEN, state.open) if (matchMedia('(max-width: 767px)').matches) { state.open ? this.getSubMenu().show() : this.getSubMenu().close() } if (state.open) { window.scrollTo({ x: 0, y: 0 }) } }

[codecov-commenter]

Codecov Report

Merging #466 (c33434d) into develop (da891a7) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop     #466   +/-   ##
========================================
  Coverage    96.43%   96.43%           
========================================
  Files          505      505           
  Lines        18144    18144           
========================================
  Hits         17498    17498           
  Misses         646      646           

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[vaszig]

Tested locally and works as expected. Thanks for the notes as well!