New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for changing focus in lifecycle hooks #1988

merged 2 commits into from Oct 14, 2017


None yet
4 participants
Copy link

purplecode commented Oct 12, 2017

Changing focus on element creation and update is currently no possible even if intended. The original activeElement is restored after rendering, because of some issues with rendering in IE according to the comments:

Motivation and Context

There is a valid use case for changing the behavior. Let's assume we have a modal (might come from 3rd party library) that sets the focus to inner input when shown. When closed it resets the focus to original active element.

function openModal(node) {
     previousActiveElement = document.activeElement;

function closeModal() {

const modal = () => 
 <Modal oncreate={({dom}) => openModal(dom)}>
   <Input id="input"/>

render(root, modal()); // focus should be set to input inside modal

My change is not including remove callbacks. Focus can be set only in init, create and update hooks. Fixing it would require much deeper changes. If you agree with the approach I could follow up on it and made another PR. If not, it would make sense at least to include a warning in documentation.

How Has This Been Tested?

Unit test + application code.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)


  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have updated docs/

@purplecode purplecode requested a review from isiahmeadows as a code owner Oct 12, 2017

@pygy pygy self-requested a review Oct 13, 2017


pygy approved these changes Oct 13, 2017

Copy link

pygy left a comment

Thanks for this, setTimeout(() => vnode.dom.focus()), begone!

I've been affected by the problem and I've read that code countless times, yet I hadn't connected the dots...

LGTM if you add a change log entry.

@purplecode purplecode requested a review from tivac as a code owner Oct 13, 2017


This comment has been minimized.

Copy link

purplecode commented Oct 13, 2017 updated


This comment has been minimized.

Copy link

pygy commented Oct 13, 2017

Many thanks :-)

Now we need the input of either @isiahmeadows, @tivac or @lhorie :-)


This comment has been minimized.

Copy link

tivac commented Oct 14, 2017

I'd trust @pygy's code review more than mine, but I'm happy to 👍 this. Thanks so much @purplecode!


tivac approved these changes Oct 14, 2017

@tivac tivac merged commit 8b56c70 into MithrilJS:next Oct 14, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed

pygy added a commit that referenced this pull request Nov 29, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment