Find sibling via htmltools::tagQuery

[ismirsehregal]

I'm trying to find the span:
<span class="input-group-text">per month</span>

in the following HTML snippet via htmltools::tagQuery:

<div class="form-group shiny-input-container" style="width:160px;">
  <label class="control-label" for="numericInputIconId">numericInputIcon</label>
  <div class="input-group">
    <input id="numericInputIconId" type="number" class="form-control numeric-input-icon" value="5" min="0" max="10"/>
    <div class="input-group-addon sw-input-icon input-group-append">
      <span class="input-group-text">per month</span>
    </div>
  </div>
  <span class="help-block invalid-feedback hidden d-none"></span>
</div>

However $selectedTags() remains empty:

tagQ <- htmltools::tagQuery(
  shinyWidgets::numericInputIcon(
    inputId = "numericInputIconId",
    label = "numericInputIcon",
    value = 5,
    min = 0,
    max = 10,
    width = "160px",
    icon = list(NULL, "per month")
  )
)
tagQ$find("span")$selectedTags() # only finds the help-block span: [[1]] <span class="help-block invalid-feedback hidden d-none"></span>
tagQ$find(".input-group-text") # `$selectedTags()`: (Empty selection)
tagQ$find(".input-group")$find("div") # `$selectedTags()`: (Empty selection)
tagQ$find("#numericInputIconId")$siblings("div") # `$selectedTags()`: (Empty selection)

What am I missing here?

Related articles:

Using tagQuery() to query and modify HTML tags

Using tagQuery() to query and modify HTML tags

[ismirsehregal]

By now I filed an issue here, as I'm not sure if this is a bug.

[nirgrahamuk]

I'm on shinyWidgets 0.5.7
the widget seems to have a different html representation than it presents for you

`$allTags()`:
  <div class="form-group shiny-input-container" style="width: 160px;">
  <label class="control-label" for="numericInputIconId">numericInputIcon</label>
  <div class="input-group">
  <input id="numericInputIconId" type="number" class="form-control numeric-input-icon" value="5" min="0" max="10"/>
  <span class="input-group-addon">per month</span>
  </div>
  <span class="help-block hidden"></span>
  </div>
  
  `$selectedTags()`: `$allTags()`

For me that means I can find the 'per month' by looking for class input-group-addon rather than input-group-text

> tagQ$find(".input-group-addon")$selectedTags()
[[1]] 
<span class="input-group-addon">per month</span>

[ismirsehregal]

Thanks for your reply!
May I ask which htmltools version you are using? I don't get any ouput via tagQ$find(".input-group-addon")$selectedTags() using htmltools 0.5.2.

Edit: same behaviour after updating to the latest GitHub version htmltools:

[nirgrahamuk]

I was using htmlools 0.5.2

[ismirsehregal]

Ok - that is strange - not sure if it makes a difference but I'm running this on Windows 10.

[nirgrahamuk]

I upgrade to shinyWidgets 0.64 and got the same as you, and couldnt make the tagQ stuff work. hopefully your issue will be addressed by the dev's. This seems like it would be good functionality, but it is marked experimental after all. Still, thanks for bringing it to my attention, one to keep an eye on.

[ismirsehregal]

By now Winston Chang answered my question here.

This is not a tagQuery bug.

The problem is, that shinyWidgets::numericInputIcon() returns a function which yields its result at render time. To modify the tag after rendering see this for a workaround.

@nirgrahamuk if you are interested in tagQuery please also see this chapter from Outstanding User Interfaces with Shiny - it's a great function.