dbl-components/src/js/forms/fields/select-field.js

Framework based on bootstrap 5

import React from "react";

import Field from "./field";

export default class SelectField extends Field {
  static jsClass = "SelectField";

  onChange(e) {
    let { value } = e.target;
    const opt = this.props.options.find((opt) => opt.value == value);
    this.setState(
      {
        value,
        error: this.isInvalid(value),
      },
      () => this.returnData(opt ? opt.value : value, { option: opt })
    );
  }

  get inputProps() {
    const props = super.inputProps;
    delete props.placeholder;
    delete props.type;
    props.className = props.className.replace("form-control", "form-select");
    return props;
  }

  get inputNode() {
    const { placeholder, options, label, floating } = this.props;
    const inputNode = React.createElement(
      "select",
      { ...this.inputProps },
      placeholder &&
        (label || !floating) &&
        React.createElement(
          "option",
          { value: "" },
          this.extractString(placeholder)
        ),
      placeholder &&
        (label || !floating) &&
        React.createElement("option", { disabled: true }, "──────────"),
      ...[
        Array.isArray(options) &&
          options.map((opt) => {
            if (!opt) return false;

            const modify =
              typeof this.props.mutations === "function" &&
              this.props.mutations(`${this.props.name}.${opt.value}`, opt);
            const { active, disabled, label, value, title } = Object.assign(
              {},
              opt,
              modify || {}
            );
            if (active === false) return false;

            let propsOpt = {
              value,
              disabled,
              title,
            };
            return React.createElement(
              "option",
              { key: value, ...propsOpt },
              label
            );
          }),
      ]
        .flat()
        .filter(Boolean)
    );
    return inputNode;
  }
}