keep-parent-focused

Adds class on an element while one of the children has the focus

Usage no npm install needed!

<script type="module">
  import keepParentFocused from 'https://cdn.skypack.dev/keep-parent-focused';
</script>

README

keep-parent-focused

Build Status Coverage Status

Alternative to focus-within and inspired by css-tricks.

Getting started

npm install keep-parent-focused

Usage

keepParentFocused(element[, focusClass])

Parameters:

  • element <HTMLElement | null>: Any HTML element where the focusClass should get applied on. It will check all focusable children.
  • focusClass <String> (optional): String will get applied as class to given element. Default: focused

Returns:

  • Function: A function which can be called to remove all eventlisteners

Example:

import keepParentFocused from 'keep-parent-focused';

keepParentFocused(document.getElementById('my-element'));

// Applies '.focused' on '#my-element' when the button is focused
//
// <div id="my-element">
//   <button>Any button</button>
// <div>