Dropdown can't show state of select entity if is not present in options

[martindybal]

Checklist:

• [ X ] I updated to the latest version available
• [ X ] I cleared the cache of my browser
• [ X ] I have confirmed that this is an issue with this project and not an integration by making the same actions with the actions dev tool

Release with the issue:
CUSTOM-FEATURES-FOR-TILES-AND-MORE v4.2.1

Last working release (if known):

Browser and Operating System:
https://whatismybrowser.com/w/PSY6SCY

Description of problem:
Suppose we have a select.test that has the option [A, B, C]. And I want to add a dropdown that allows me to select A or B. I don't want to be able to select C (in my case it's technical transition state which cannot be selected). With this configuration, the dropdown shows as empty if the select.test state is C. It is not possible to set custom text in it. Also the select.test C value is not displayed.

Javascript errors shown in the web inspector (if applicable):

Your Full Card Config

type: tile
entity: light.test
features:
  - type: custom:service-call
    entries:
      - type: dropdown
        entity_id: select.test
        options:
          - entity_id: select.test
            option: A
            tap_action:
              action: perform-action
              perform_action: select.select_option
              data:
                option: A
              target:
                entity_id: select.test
          - entity_id: select.test
            option: B
            tap_action:
              action: perform-action
              perform_action: select.select_option
              data:
                option: B
              target:
                entity_id: select.test

Additional information:

[Nerwyn]

So you want to be able to display the third option C but not have it show up in the dropdown options list? You can do that with CSS! Add this to the base CSS styles of your dropdown. You'll also have to add it as an option in your options list.

.option:nth-child(3) {
  display: none;
}

[martindybal]

ok, it can be solved that way too :-). Thanks @Nerwyn

I improved by rename technical state. Can help the others.

{% if states("select.test") in ["C"] %}
.select .label {
  visibility: hidden;
  max-width: 0;
}
.select .label::before {
  visibility: visible;
  content: "Not selectable transition"; 
}
{% endif %}

[martindybal]

This is final look. In real case scenario there are three transition states

[Nerwyn]

How did you get the card feature to be in line with the tile icon and info? Card-mod?

[martindybal]

How did you get the card feature to be in line with the tile icon and info? Card-mod?

Yes. It's more compact.