Skip to content

DBSelect with multiple option style destroyed #4227

Closed
@d-koppenhagen

Description

@d-koppenhagen

Which generators are impacted?

  • All
  • HTML
  • React
  • Angular
  • Vue
  • Web components
  • Power Apps

Reproduction case

// ...
const options = ["B", "G", "aG", "Bl", "Gl", "TBl", "H"]
        .filter((possibleMark) => !field.state.value.includes(possibleMark))
        .map((possibleMark) => ({ value: possibleMark }));
return (<DBSelect
    className={styles.select}
    label="Merkzeichen auswählen"
    message="Mehrere Angaben möglich"
    disabled={options.length < 1}
    validation={field.state.meta.errors.length > 0 ? "invalid" : "no-validation"}
    invalidMessage={field.state.meta.errors.map((err) => err.message).join(",") || undefined}
    onBlur={field.handleBlur}
    multiple={true}
>
    {options.map((option) => (
        <option key={option.value} value={option.value}>
            {option.value}
        </option>
    ))}
</DBSelect>)
// ...

The result looks like... see screenshots section.

Expected Behaviour

No overlapping labels, nice looking <select> for multiselection

Screenshots

Image

Browser version

Edge

Add any other context about the problem here.

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    ✅ Done

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions