How to use @material/select - 10 common examples

notifyChange: value => {
          const index = this.selectedIndex;
          emitCustomEvent(
            this.$refs.root,
            MDCSelectFoundation.strings.CHANGE_EVENT,
            { value, index },
            true /* shouldBubble  */,
          );

          this.$emit('change', value);
        },

const elementRestaurantIdInput = document.getElementById('restaurant-id-input');
const elementRestaurantIdLabel = document.getElementById('restaurant-id-label');
// const elementNameInput = document.getElementById('name-input');
// const elementRestaurantRatingSelect = 
//   document.getElementById('restaurant-rating-select');
// const elementCommentsInput = document.getElementById('comments-input');

/**
 * Material Design
 */
const classRestaurantIdInput = 
  new MDCTextField(document.querySelector('.restaurant-id-input'));
const classNameInput = 
  new MDCTextField(document.querySelector('.name-input'));
const classRestaurantRatingSelect = 
  new MDCSelect(document.querySelector('.restaurant-rating-select'));
const classCommentsInput = 
  new MDCTextField(document.querySelector('.comments-input'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

/**
 * Start the following when the initial HTML document has been
 * completely loaded and parsed, without waiting for stylesheets, images,
 * and subframes to finish loading.
 * Fetch neighborhoods and cuisines.
 * https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
 */
document.addEventListener('DOMContentLoaded', (event) => {
  // Get restaurant id by using url parameter on current page.
  const id = getParameterByName('id');

(___)     (___)     (___)
                              Roma
   If you're checking out the console, maybe you want to contribute?
              Please do! https://github.com/TEIC/romajs
   `)

    this.props.clearUiData()
    const tabBar = new MDCTabBar(this.refs.tabs)
    tabBar.listen('MDCTabBar:change', ({detail: tabs}) => {
      this.updatePanel(tabs.activeTabIndex)
    })
    // Set start function to first option
    this.setState({selectedKnown: this.state.odds.urls[0]})
    this._updateCustomizationUrl()

    const select = new MDCSelect(this.refs.chooseodd)
    select.foundation_.setSelectedIndex(0)
    select.listen('MDCSelect:change', () => {
      const idx = this.state.odds.labels.indexOf(select.value)
      this.setState({selectedKnown: this.state.odds.urls[idx]})
      this._updateCustomizationUrl()
    })
  }

},
          getLabelWidth: () => {
            return floatingLabel.current?.getWidth() || 0;
          }
        };
      };

      const getFoundationMap = () => {
        return {
          leadingIcon:
            (leadingIcon.current && leadingIcon.current.getFoundation()) ||
            undefined
        };
      };

      const f = new MDCSelectFoundation(
        {
          ...getSelectAdapterMethods(),
          ...getCommonAdapterMethods(),
          ...getOutlineAdapterMethods(),
          ...getLabelAdapterMethods()
        },
        getFoundationMap()
      );

      // This foundation requires a bit of monkey patching
      // in order to get placeholders working correctly
      const adapter = (f as any).adapter_ as MDCSelectAdapter;

      // @ts-ignore private override
      f.updateLabel_ = () => {
        const doWork = () => {

getDefaultFoundation() {
    return new MDCSelectFoundation({
      addClass: (className) => this.root_.classList.add(className),
      removeClass: (className) => this.root_.classList.remove(className),
      floatLabel: (value) => {
        if (this.label_) {
          this.label_.float(value);
        }
      },
      addClassToBottomLine: (className) => this.bottomLine_.classList.add(className),
      removeClassFromBottomLine: (className) => this.bottomLine_.classList.remove(className),
      setBottomLineAttr: (attr, value) => this.bottomLine_.setAttribute(attr, value),
      setAttr: (attr, value) => this.root_.setAttribute(attr, value),
      rmAttr: (attr, value) => this.root_.removeAttribute(attr, value),
      computeBoundingRect: () => this.surface_.getBoundingClientRect(),
      registerInteractionHandler: (type, handler) => this.surface_.addEventListener(type, handler),
      deregisterInteractionHandler: (type, handler) => {
        if (this.surface_) { // DOM might be removed before deregistration

mounted() {
    const {
      SELECTED_ITEM_SELECTOR,
      SELECT_ANCHOR_SELECTOR,
      VALUE_ATTR,
    } = MDCSelectFoundation.strings;

    this.menuSetup_();

    this.foundation = new MDCSelectFoundation(
      Object.assign({
        // common methods
        addClass: className => this.$set(this.classes, className, true),
        removeClass: className => this.$delete(this.classes, className),
        hasClass: className => Boolean(this.classes[className]),

        setRippleCenter: normalizedX =>
          this.$refs.lineRippleEl &&
          this.$refs.lineRippleEl.setRippleCenter(normalizedX),
        activateBottomLine: () => {
          if (this.$refs.lineRippleEl) {
            this.$refs.lineRippleEl.foundation_.activate();

checkValidity: () => {
        const classList = this.root.ref && this.root.ref.classList;
        if (
          classList &&
          classList.contains(MDCSelectFoundation.cssClasses.REQUIRED) &&
          !classList.contains(MDCSelectFoundation.cssClasses.DISABLED)
        ) {
          // See notes for required attribute under https://www.w3.org/TR/html52/sec-forms.html#the-select-element
          // TL;DR: Invalid if no index is selected, or if the first index is selected and has an empty value.
          return (
            this.state.selectedIndex !== -1 &&
            (this.state.selectedIndex !== 0 || !!this.value)
          );
        } else {
          return true;
        }
      },
      setValid: (isValid: boolean) => {

checkValidity: () => {
        const classList = this.root.ref && this.root.ref.classList;
        if (
          classList &&
          classList.contains(MDCSelectFoundation.cssClasses.REQUIRED) &&
          !classList.contains(MDCSelectFoundation.cssClasses.DISABLED)
        ) {
          // See notes for required attribute under https://www.w3.org/TR/html52/sec-forms.html#the-select-element
          // TL;DR: Invalid if no index is selected, or if the first index is selected and has an empty value.
          return (
            this.state.selectedIndex !== -1 &&
            (this.state.selectedIndex !== 0 || !!this.value)
          );
        } else {
          return true;
        }
      },
      setValid: (isValid: boolean) => {

getDefaultFoundation() {
    this.menuEl_ = this.root_.querySelector('.mdc-select__menu')
    // prettier-ignore
    return new MDCSelectFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      setAttr: helper.setAttr('rootProps', this),
      rmAttr: helper.rmAttr('rootProps', this),
      computeBoundingRect: () => this.root_.getBoundingClientRect(),
      // Don't use rootProps here for Event bubbling
      registerInteractionHandler: (type, handler) => this.root_.addEventListener(type, handler),
      deregisterInteractionHandler: (type, handler) => this.root_.removeEventListener(type, handler),
      focus: () => this.root_.focus(),
      makeTabbable: helper.setAttr('rootProps', this, 'tabIndex', 0),
      makeUntabbable: helper.setAttr('rootProps', this, 'tabIndex', -1),
      getComputedStyleValue: propertyName => window.getComputedStyle(this.root_).getPropertyValue(propertyName),
      setStyle: (propertyName, value) => this.root_.style.setProperty(propertyName, value),
      create2dRenderingContext: () => document.createElement('canvas').getContext('2d'),
      setMenuElStyle: (propertyName, value) => this.menuEl_.style.setProperty(propertyName, value),
      setMenuElAttr: helper.setAttr('menuProps', this),

mounted() {
    this.foundation = new MDCSelectFoundation(
      Object.assign({
        // common methods
        addClass: className => this.$set(this.classes, className, true),
        removeClass: className => this.$delete(this.classes, className),
        hasClass: className => Boolean(this.classes[className]),
        setRippleCenter: normalizedX =>
          this.$refs.lineRippleEl &&
          this.$refs.lineRippleEl.setRippleCenter(normalizedX),
        activateBottomLine: () => {
          if (this.$refs.lineRippleEl) {
            this.$refs.lineRippleEl.foundation.activate();
          }
        },
        deactivateBottomLine: () => {
          if (this.$refs.lineRippleEl) {
            this.$refs.lineRippleEl.foundation.deactivate();