bug(@vtmn/react): `VtmnDropdownItem` component doesn't display any content

[jdeca-decat]

Describe the bug When I add items to VtmnDropdown like in the React showcase, nothing appear..

Steps to reproduce

• Install React
• install Vtmn package for React
• add VtmnDropdownItem component to your VtmnDropdown as children

Expected behavior VtmnDropdownItem should be able to display their content, like in MUI Item Select

Version affected @react: 18.2.0 @vtmn/react: 0.67.0

[lauthieb]

Thanks @jdeca-decat for this issue. As the @vtmn/react is a community library, I hope someone will take this issue to help you. If you want, feel free to contribute also! We are there to help you if needed regarding launching & contributing on the vitamin-web stack.

[0x2A-git]

Hi @jdeca-decat,

I've tried to reproduce your setup in a CRA project and tested it on both Firefox & Chrome but I'm not able to reproduce it.

Code :

<VtmnDropdown
  id="foo"
  summary={'10'}
  onChange={(value: string) => {
    console.log(value)
  }}
>
  <VtmnDropdownItem id="item-1">10</VtmnDropdownItem>

  <VtmnDropdownItem id="item-2">20</VtmnDropdownItem>

  <VtmnDropdownItem id="item-3">30</VtmnDropdownItem>
</VtmnDropdown>

Result :

The only 'issue' that I've encountered is the 'value' parameter being set to undefined which is the expected behavior given that my VtmnDropdownItem do not have a value attribute.

Could the VtmnDropdown component be wrapped inside another component that would prevent its children from being displayed ? :thinking:

[jdeca-decat]

@0x2A-git thank you for trying to help me ! I was able to solve the mystery following your answer, in fact it's the css rule that applied to the VtmnDropdown, because a bug makes the "Label" appear while it's not configured.. (This is another issue I opened). So I had configured a style rule to hide the "Label" typography above the select, and an important symbol was missing.

The content of the Select is NOT displayed:

.vtmn-dropdown label {
  display: none;
}

The content of the Select is displayed:

.vtmn-dropdown > label {
  display: none;
}

The "greater than" operator can target the direct children of the class .vtmn-dropdown but not itself, so that's what was causing the dropdown not to display. Sorry for not specifying it before and thank you !

So the correct final solution in my case is: In .tsx file

        <VtmnDropdown
          id="vtmn-dropdown"
          summary={selectValue}
          onChange={(value: string) => {
            setSelectValue(value);
          }}
        >
          <VtmnDropdownItem id="item-1" value={"10"}>
            10
          </VtmnDropdownItem>

          <VtmnDropdownItem id="item-2" value={"20"}>
            20
          </VtmnDropdownItem>

          <VtmnDropdownItem id="item-3" value={"30"}>
            30
          </VtmnDropdownItem>
        </VtmnDropdown>

in css rule attach to it (if you want to fix the bug of the label that displayed while it's not configured)

.vtmn-dropdown > label {
  display: none;
}