Why are data-uk attributes not applied when using UIkit (from getuikit) in React?

Question

I recently noticed that, for some reason, UIkit was no longer picking up the data-uk-dropdown attributes in my React project. E.g. this no longer worked

  <div data-uk-dropdown="mode: click">
    <ul className="uk-nav uk-dropdown-nav">
        <li>One</li>
        <li>Two</li>
    </ul>
  </div>

I also noticed that in the UIkit boot function in the UIkit core, the applyChildListMutation handler was installed but never called back. This leads me to believe that the code to initialize UIkit was not playing nicely with React (anymore).

Answer 1

The actual thing that was missing was this import statement: import UIkit from 'uikit';. You need this even when you are not referencing UIkit in the code (it probably triggers the loading of the required library code).

Answer 2

I was not able to fix the original problem, but using the UIkit help I realized that I can use Javascript to solve it like this:

<div ref={(x: any) => {UIkit.dropdown(x, {mode: 'click'});}}>
  <ul className="uk-nav uk-dropdown-nav">
      <li>One</li>
      <li>Two</li>
  </ul>
</div>

This has the added benefit of type-checking the properties that you pass to UIkit.dropdown.