Menu title LI created outside UL

[cmaish]

When videojs adds the menus, it seems that the .vjs-menu-title LI item that's created is added to the .vjs-menu (which is a DIV) instead of the .vjs-menu-content.

This is present for me in 4.4.3. This is present on the main page of http://www.videojs.com/ . The output HTML in my case is:

<div class="vjs-chapters-button vjs-menu-button vjs-control " role="button" aria-live="polite" tabindex="0" aria-haspopup="true" aria-label="Chapters Menu" style="display: none;">
   <div class="vjs-control-content"><span class="vjs-control-text">Chapters</span></div>
   <div class="vjs-menu">
      <ul class="vjs-menu-content"></ul>
      <li class="vjs-menu-title">Chapters</li>
   </div>
</div>

It seems that the culprit is:

https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L951

which uses menu.el_ rather than menu.contentEl (or creates an LI rather than a div, not sure what the 'right' fix is here, but either should work).

[cmaish]

Also there's another area in the source (vjs.MenuButton.prototype.createMenu) which may be affected by the same issue - it uses menu.el() which IIRC just returns component's el_ (so the div), but I don't hit that codepath.

[jnwng]

+1, had the same issue, solved it by making a change here.

i've changed menu.el_ to menu.contentEl(), which properly sets the title item inside of the <ul></ul> element. there was a little bit of strangeness with styling that may additionally have to be addressed

[mmcc]

@jnwng Any chance you'd be interested in submitting a PR for your fix?

[jnwng]

yep, i can get to that hopefully by the end of the day.