... I am unable to select the " /> ... I am unable to select the " /> ... I am unable to select the "/>

How can I let elements inside a xul tab element receive mouse events?

93 views Asked by At

Considering this xul markup:

<tabbox>
  <tabs>
    <tab>
      <textbox width="50">
    </tab>
  </tabs>
  <!-- ... -->
</tabbox>

... I am unable to select the <textbox> with my mouse. The <tab> shields off any mouse event to child nodes, it seems. How can I let the <textbox> receive mouse events?

I've tried attributes like mousethrough="always" and mousethrough="never" on both the <tab> and <textbox> element, but to be honest, I'm not entirely sure what that attribute is supposed to do. Furthermore I believe it's only applicable to elements in a <stack>.

I've also tried allowevents="true" on the <tab>, but that doesn't do anything either, unfortunately.

What does work, to some extent, is passing the focus through JavaScript, with something like:

theTab.addEventListener( 'focus', function( event ) {
  theTextbox.focus();
} );

... but that is too clunky, and still doesn't make the <textbox> behave properly (unable to select the text, etc.). I'd probably need to implement this for a whole slew of events, then.

So, what, if any, simple steps can I take to have child nodes of a <tab> element behave as expected?

Or do I perhaps need to completely extend the tab XBL, because a tab generally is not meant to behave the way I intend here?

edit:

It just occurred to me that I can probably visually fake it a little by omitting the tab altogether and just have a <textbox>, that appears like a tab, with:

<textbox id="someId"/>

#someId {
  -moz-appearance: tab
}

... and try to incorporate that somehow in the <tabs> element.

Still, I'd rather have a solution with an actual <tab>, such that I can let the <tab> behave as an actual <tab>, to some extent, as well (popping up a bit, when selected, etc.).

0

There are 0 answers