Material Select className props does not work in custom mark

import classNames from 'classnames';

import PropTypes from 'prop-types'; import { Component } from 'react'; import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from 'mdbreact';

import Message from '../../Message'; import { Icon } from '../../../components/Generic';

class Select extends Component { static propTypes = { className: PropTypes.string, color: PropTypes.string, dark: PropTypes.bool, options: PropTypes.array.isRequired, disabled: PropTypes.bool, error: PropTypes.oneOfType([ PropTypes.bool, PropTypes.string, PropTypes.array, ]), id: PropTypes.string.isRequired, inputClass: PropTypes.string, label: PropTypes.string, labelClass: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, required: PropTypes.bool, selectedOptionId: PropTypes.string, placeholder: PropTypes.string, success: PropTypes.oneOfType([ PropTypes.bool, PropTypes.string, PropTypes.array, ]), tag: PropTypes.string, tooltip: PropTypes.node, validate: PropTypes.oneOfType([ PropTypes.bool, PropTypes.func, ]), validating: PropTypes.bool, value: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, ]), warning: PropTypes.oneOfType([ PropTypes.bool, PropTypes.string, PropTypes.array, ]), wrap: PropTypes.bool, };

static defaultProps = {
    wrap: true,
    dark: false,
    disabled: false,
    validate: true,
    validating: false,
    required: false,
    tag: 'div',
};

constructor(props) {
    super(props);
    const { options, selectedOptionId } = this.props;

    this.state = {
        options: options,
        selectedOptionId: selectedOptionId,
        focused: false,
        value: '',
    };
}

componentDidMount() {
    const { value } = this.props;

    this.setState({
        value: value,
    });
}

componentDidUpdate(prevProps) {
    const { value } = this.props;
    if (value !== prevProps.value) {
        this.setState({
            value: value
        });
    }
}

onBlur = () => {
    if (this.state.focused) {
        this.setState({
            focused: false,
        });
    }
}

onFocus = () => {
    if (!this.state.focused) {
        this.setState({
            focused: true,
        });
    }
}

handleOnChange = (event) => {
    const { onChange, id, name } = this.props;
    this.setState({
        value: event.target.value,
    });

    onChange(event.target.value, id, name);
}

render() {
    const { focused, value, options } = this.state;
    const { dark, className, inputClass, disabled, label, labelClass, tag, wrap, placeholder,
        tooltip, success, error, required, warning, validate, validating, color, name, id,
    } = this.props;
    const FormTag = tag;

    return (
        <FormTag
            className={classNames(
                { 'form-group from-group--select': wrap },
                { 'no-wrap': !wrap },
                { 'form-group--dark': dark && wrap },
                className,
            )}
        >
            <MDBSelect
                // BUG: this should get class name test, but only default classs appears
                className="test"
                disabled={disabled}
                focusShadow="none"
                getValue={this.onChange}
                id={id}
                name={name ? name : id}
                onBlur={this.onBlur}
                onFocus={this.onFocus}
                outline
                required={required}
                value={value}
            >
                <MDBSelectInput
                    className={classNames(
                        'form-control select',
                        {
                            'form-control--validate': validate,
                            'form-control--valid': success,
                            'form-control--invalid': error,
                            // 'form-control--filled': value,
                            'form-control--required': required,
                            'form-control--validating': validating,
                            'form-control--warning': warning,
                            'form-control--tooltip': tooltip,
                            [`form-control--${color}`]: color,
                        },
                        inputClass,
                    )}
                    selected={placeholder}
                />
                <MDBSelectOptions>
                    {/* TODO: Check if we need this */}
                    {/* <MDBSelectOption disabled>{placeholder}</MDBSelectOption> */}
                    {options.map((option, index) => (
                        <MDBSelectOption
                            disabled={option.disabled ? true : false}
                            key={index}
                            value={option.value}
                        >
                            {option.text}
                        </MDBSelectOption>
                    ))}
                </MDBSelectOptions>


                <label
                    className={classNames(
                        'form-control__label',
                        {
                            'active': focused || value,
                        },
                        labelClass,
                    )}
                    htmlFor={id}
                >
                    {typeof label === 'object' ?
                        label : <Message message={label} />
                    }
                </label>
                <Icon
                    className={classNames(
                        'form-control__icon',
                        {
                            'active': focused || value,
                        },
                    )}
                    name="chevron-down"
                    size="sm"
                />
            </MDBSelect>


        </FormTag>
    );
}

}

export default Select;

In component MDBSelect, className props is only default classes, not "test". In data array mode works properly.

Same behavior with disabled props, now tested. Text input must get disabled, this can I writy by myself, but there are need some improvements. :-)

And better solution with selected props (aka placeholder for select) is solve it as placeholder not value, cos I cannot write condition with it. Something like if value is null do something. Can I get Context from your components some how? I need focused state class, or isEmpty class etc. Thanks for advice.