Make the OJS widgets style match bootstrap

[royfrancis]

Description

The OJS widget style and the 'default' bootstrap style do not match.

---
title: Form style
format: html
---

## Raw HTML form

```{=html}
<select class="form-select" aria-label="Select value">
  <option selected>Select value</option>
  <option value="mpg">mpg</option>
  <option value="disp">disp</option>
  <option value="hp">hp</option>
  <option value="drat">drat</option>
</select>
```

## OJS form

```{ojs}
viewof x = Inputs.select(["mpg","disp","hp","drat"], {
  value: "mpg", multiple: false, label: "Select value:"
})
```

How do I make the OJS widgets use the nicer bootstrap style/theme?

quarto 1.4.506

[cscheid]

This is hard to do in general, because "Inputs.select()" is part of the ObservableHQ standard library, and ObservableHQ doesn't use bootstrap.

The DOM elements are quite different. ObservableHQ emits an entire form, as you can see with your browser's devtools:

<form class="oi-3a86ea"><label for="oi-3a86ea-1">Select value:</label><select class="oi-3a86ea-input" name="input" id="oi-3a86ea-1">
      <option value="0" selected="">mpg</option><option value="1">disp</option><option value="2">hp</option><option value="3">drat</option>
    </select></form>

Those elements are created at runtime, and ObservableHQ uses random IDs and classes, so we can't easily target those elements.

What truly needs to be done is that we need a QuartoInputs library that uses bslib styling, like the rest of Posit's code does. That is a large engineering project, though, so we don't have a timeline to offer.

You could always emit those yourself, and then convert the onclick handlers to ObservableHQ reactives using Generator.observe. Be warned that this will require using some advanced ObservableHQ concepts, though.