SelectField for Material-UI always shows label collapsed on the top

[ChakirMrabet]

The SelectField for Material-UI always shows the label collapsed on the top like if there was a placeholder set. See below:

While originally from Material-UI, the field should show the label inside it like a placeholder:

[radekmie]

Hi @ChakirMrabet. What packages and which versions are you using? I've tried it with the following schema:

new SimpleSchema({
    size: {
        type: String,
        allowedValues: ['xs', 's', 'm', 'l', 'xl']
    }
})

And it looked as it should (non-raised label).

[ChakirMrabet]

Thanks for your response @radekmie .

Here is the code I have (sorry, it's a little bit dirty, I'm still sketching):

import React from "react";
import { compose, pure } from "recompose";

import SimpleSchema from "simpl-schema";
import AutoForm from "uniforms-material/AutoForm";
import TextField from "uniforms-material/TextField";
import LongTextField from "uniforms-material/LongTextField";
import SelectField from "uniforms-material/SelectField";
import SubmitField from "uniforms-material/SubmitField";
import ErrorsField from "uniforms-material/ErrorsField";

// Material-UI
import withStyles from "@material-ui/core/styles/withStyles";

// Uniforms
import { Children } from "react";
import BaseField from "uniforms/BaseField";

// JS styles
const styles = theme => ({});

const DisplayIf = ({ children, condition }, { uniforms }) =>
  condition(uniforms) ? Children.only(children) : null;

DisplayIf.contextTypes = BaseField.contextTypes;

const industries = [
  "Inspection Services",
  "Flat Products",
  "Long Products",
  "Automotive",
  "Aerospace",
  "Nuclear",
  "Railroad",
  "Other"
];

const schema = new SimpleSchema({
  name: {
    type: String,
    max: 30
  },
  type: {
    type: String,
    allowedValues: ["Customer", "Representative", "Office"],
    defaultValue: "Customer"
  },
  web: {
    type: String,
    optional: true
  },
  industry: {
    type: String,
    allowedValues: industries,
    optional: true,
    custom: function() {
      const type = this.field("type").value;
      const value = this.value;

      if (type === "Office") {
        return undefined;
      }

      if (value && industries.includes(value)) {
        return undefined;
      }

      return "required";
    }
  },
  region: {
    type: String,
    defaultValue: "USA",
    allowedValues: ["USA", "Europe", "LATAM", "China", "Other"]
  },
  description: {
    type: String,
    optional: true
  }
});

// Component, pure
const Component = () => (
  <AutoForm schema={schema} onSubmit={doc => console.log(doc)}>
    <TextField name="name" />
    <SelectField name="type" />
    <SelectField name="region" />
    <DisplayIf condition={context => context.model.type !== "Office"}>
      <div>
        <TextField name="web" />
        <SelectField name="industry" />
      </div>
    </DisplayIf>
    <LongTextField name="description" multiline rows={5} />
    <ErrorsField />
    <SubmitField />
  </AutoForm>
);

export default compose(
  withStyles(styles, { name: "CompaniesFormComponent" }),
  pure
)(Component);

These are the versions of the libraries I'm using:

"@material-ui/core": "^3.9.2",
"simpl-schema": "^1.5.5",
"uniforms": "^1.31.1",
"uniforms-material": "^1.31.1"

Thanks for your help, and congrats for such a good library, I love it!

[radekmie]

Throwing a complete code is never a good way to work with something. Anyway, the schema itself is rendering a correct select, not as in your screenshot. Can you reproduce it on uniforms.tools? Maybe it's somehow related to your project code?

[ChakirMrabet]

@radekmie that code is 95% uniforms code, only addition is recompose library. In any case, I can't reproduce in uniforms.tools, but I don't have anything in my code or project that manipulates the Select control of Material-UI either..

Which version of Material-UI is uniforms.tools using?

[radekmie]

I've tested that on uniforms.tools (@material-ui/[email protected]) and in the new playground (branch v2, @material-ui/[email protected]). What is interesting, it's reproducible on the v2 branch, but there's no change in the uniforms-material package, when compared to the master branch. I'll investigate it further in the following days.

[radekmie]

It'll be part of the v2 release.