Rmwc: How to make a select menu to render as a native HTML select tag?

[fterradev]

I tried it with tag="select" and also made attempts with wrap prop, but to be honest have no idea how to work with the latter...
Any help is appreciated.

[j-o-d-o]

You can use the mdc css only select menu: (https://github.com/material-components/material-components-web/tree/master/packages/mdc-select)

<div class="mdc-select">
  <select class="mdc-select__surface">
    <option value="" default selected>Pick a food group</option>
    <option value="grains">Bread, Cereal, Rice, and Pasta</option>
    <option value="vegetables" disabled>Vegetables</option>
    <option value="fruit">Fruit</option>
    <option value="dairy">Milk, Yogurt, and Cheese</option>
    <option value="meat">Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts</option>
    <option value="fats">Fats, Oils, and Sweets</option>
  </select>
  <div class="mdc-select__bottom-line"></div>
</div>

I think for css only components, specifically the select, it is just the easiest to directly use mdc and react is not preventing you from doing that : ).

[jamesmfriedman]

I wouldn't mind supporting the CSS only components for React, but yeah it definitely makes sense why it wouldn't work. Setting the tag to select would have seemingly been the right way to do it.

I'm refactoring the select tomorrow, I'll add this to the usecase list

[fterradev]

Unfortunately it shows up like this:

So it renders the native HTML select tag with its regular look along with Material's drop down icon to the right.
The expected look was the one of the "CSS Only" version displayed here.

[j-o-d-o]

Hmm, using the latest chrome and rendering the code I put there I get a pretty okay looking select:
https://codepen.io/j-o-d-o/pen/XVrzjy

I don't think that rmwc interferes with the css in any way, so I am really not sure where this is coming from...

[fterradev]

I notice replacing the class "mdc-select__surface" with "mdc-select" on the select tag and removing class "mdc-select" on the div tag makes it work (though I'm not sure it is exactly equal the expected look). But why??

So my code now is like this:

<div>
  <select className="mdc-select" required="true">
    <option value="" selected="">Pick a food group</option>
    <option value="grains">Bread, Cereal, Rice, and Pasta</option>
    <option value="vegetables" disabled="">Vegetables</option>
    <option value="fruit">Fruit</option>
    <option value="dairy">Milk, Yogurt, and Cheese</option>
    <option value="meat">Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts</option>
    <option value="fats">Fats, Oils, and Sweets</option>
  </select>
  <div className="mdc-select__bottom-line"></div>
</div>

[j-o-d-o]

Just a hunch, did you forget to wrap the <select/>tag (which has class mdc-select__surface) with a div with class mdc-select? e.g.:

<div class="mdc-select">
  <select class="mdc-select__surface">
     ...
  </select>
</div>

Otherwise I would need to see some code in order to help

[fterradev]

Thank you for your attention.
No, I didn't forget it.
I just had to remove the class on that div (and replace the one in the select tag with another) in order to make it look better.
Anyway, I guess now I can see the cause of this issue.
v0.0.1-rc11 uses [email protected], which doesn't have the mdc-select__surface class!

[jamesmfriedman]

@fterradev you’re using the code from version 27 if MDC instead of 26.

I’ve been working on this today and upgrading to 27. I plan on cutting a new version tonight or tomorrow and have included css only selects as an option.

[fterradev]

You mean I'm using MDC 26 instead of 27, right?

[jgoux]

@jamesmfriedman Cool that you mention adding CSS only implementation of the components, I was about to create an issue about it. 😄

Would it be possible to add a css: boolean prop to all components that can work with a CSS only implementation ?

Or have a subproject for importing them like : import { Button } from 'rmwc/css/Button';

[jamesmfriedman]

by convention, I started down the path of cssOnly for the components. A lot of the cssOnly implementations have a different DOM structure, so it's not a one size fits all approach.

With that said, I did add a check for the cssOnly prop to short circuit the withMDC() constructor. Explained simply, it will not instantiate the JS part of the component if there is one. https://github.com/jamesmfriedman/rmwc/pull/62/files#diff-e4a05810e7d1367eab013211d767361fR87

Just have a small fix to make to buttons before I cut another release.

[jamesmfriedman]

Alright, live in rc12. Check the Select page in the docs.