`innerClass` property passed to components not getting applied in final DOM

[tankchintan]

Affected Projects React

Library Version: x.y.z 3.0.2

Describe the bug innerClass is not being applied to the dom elements of MultiDropdownList (& I am sure other components as well)

To Reproduce

Steps to reproduce the behavior:

• Go to https://codesandbox.io/embed/multidropdownlist-f4xrk
• Open up developer console & inspect the class for the list, list item, title. None of them have inner class I have specified in the component definition. E.g. this is my definition,

  <MultiDropdownList
  componentId="BookSensor"
  dataField="original_series.raw"
  size={100}
  innerClassName={{
  list: "some-list-class",
  listItem: "some-list-item-class",
  title: "some-title-class"
  }}
  />

And this is the generated dom,

  <div class="css-1xdhyk6 e1nzkzy80">
    <div class="css-1mnns6r">
      <button type="button" role="button" aria-label="close menu" aria-expanded="true"
      aria-haspopup="true" data-toggle="true" class="css-1bts2wl e863kyk0" title=
      "Select values">
      <div>
        Select values
      </div>
      </button>

      <ul class="css-1nbh87p">
        <li id="downshift-0-item-0" class="" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>In Death</span><span>&nbsp;(41)</span>
          </div>
        </li>

        <li id="downshift-0-item-1" class="" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>Discworld</span><span>&nbsp;(39)</span>
          </div>
        </li>

        <li id="downshift-0-item-2" class="" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>Stephanie Plum</span><span>&nbsp;(27)</span>
          </div>
        </li>

        <li id="downshift-0-item-3" class="" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>Hercule Poirot</span><span>&nbsp;(25)</span>
          </div>
        </li>

      </ul>
    </div>
  </div>

Expected behavior The dom of the dropdown list should have the class specified in the inner class prop.

  <div class="css-1xdhyk6 e1nzkzy80">
    <div class="css-1mnns6r">
      <button type="button" role="button" aria-label="close menu" aria-expanded="true"
      aria-haspopup="true" data-toggle="true" class="css-1bts2wl e863kyk0" title=
      "Select values">
      <div class="some-title-class">
        Select values
      </div>
      </button>

      <ul class="css-1nbh87p some-list-class">
        <li id="downshift-0-item-0" class="some-list-item-class" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>In Death</span><span>&nbsp;(41)</span>
          </div>
        </li>

        <li id="downshift-0-item-1" class="some-list-item-class" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>Discworld</span><span>&nbsp;(39)</span>
          </div>
        </li>

        <li id="downshift-0-item-2" class="some-list-item-class" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>Stephanie Plum</span><span>&nbsp;(27)</span>
          </div>
        </li>

        <li id="downshift-0-item-3" class="some-list-item-class" style=
        "background-color: rgb(255, 255, 255);">
          <div>
            <span>Hercule Poirot</span><span>&nbsp;(25)</span>
          </div>
        </li>

      </ul>
    </div>
  </div>

Screenshots

Desktop (please complete the following information):

• OS: MacOSX
• Browser: FireFox, Chrome, Brave

[bietkul]

It works you should use innerClass instead of innerClassName. https://codesandbox.io/embed/multidropdownlist-f4xrk

[tankchintan]

Wow, don't know how I missed that! Thanks!