How to set hint for Menu component?

[codercms]

I wrote simple markup using docs for menu component:

<media-menu bind:this={audioGainMenu}>
  <media-menu-button>
      <media-icon type="arrow-left" slot="close-icon"></media-icon>
      <media-icon type="odometer" slot="icon"></media-icon>
      <span slot="label">Volume Gain</span>
      <div slot="hint">{audioGainVal}</div>
      <media-icon type="chevron-right" slot="open-icon"></media-icon>
  </media-menu-button>
  <media-menu-items>
      <media-radio-group value="0" bind:this={audioGainRadio} on:change={onAudioGainChange}>
          <media-radio value="0">Disabled</media-radio>
          <media-radio value="200">200%</media-radio>
          <media-radio value="300">300%</media-radio>
          <media-radio value="400">400%</media-radio>
      </media-radio-group>
  </media-menu-items>
</media-menu>

But I can't find any API to set hint for <div slot="hint">...</div> , is there any way to set hint?

[mihar-22]

Currently, if you're not using one of the prebuilt menus such as <media-audio-menu-items> you need to set the hint yourself. We could add a feature that if a menu items has a radio group then we can set hint as usual. It's just not the case at the moment.

You can set it yourself using the on:change listener and querying the hint div and updating it:

function onAudioGainChange(event) {
   const hint = audioGainMenu.querySelector('[slot="hint"]');
   hint.textContent = event.target.value;
}

[mihar-22]

Sorry quickly read through and gave the wrong example. Updated to just use the on:change listener.

[mihar-22]

Oh I think there might be a bug, is it not setting? I think the menu component is setting to empty when it mounts....

[codercms]

@mihar-22 Yep, it just sets hint to empty string when component mounts.
I think It would be nice if there will be some API to set hint for custom menus, e.g.:

<media-menu hint={myHint}>

UPD: Or just to prevent somehow <div slot="hint"> content from being emptied.