Extra carets on selects

[serkandurusoy]

While using material selects,

• especially those whose options are computed,
• or change depending on some other field's value,
• lots of carets appear the parent div of the select

Prior to 0.0.24, I used the following workaround in my schema definition:

fieldOne: {
  type: String,
  autoform: {
    firstOption: 'Select an option',
    options: function() {
      var optionsObject = someFunctionOrExpressionThatBuildsTheOptionsObject();
      var $this = $('[name="fieldOne"]');
      $this.parent().find('span.caret').remove();
      $this.material_select();
      return optionObject;
    }
  }
}

This has been a known problem and the above a suggested workaround.

BUT

As of 0.0.24 this does not work. Namely, an additional caret appears above the select no matter what. To mitigate that, I run the cleanup twice like below:

fieldOne: {
  type: String,
  autoform: {
    firstOption: 'Select an option',
    options: function() {
      var optionsObject = someFunctionOrExpressionThatBuildsTheOptionsObject();
      var $this = $('[name="fieldOne"]');
      $this.parent().find('span.caret').remove();
      $this.material_select();
      $this.parent().find('span.caret').remove();
      return optionObject;
    }
  }
}

BUT this works only for the first render of the autoform. If the options get updated due to some reactive update, another single extra caret appears above.

Now I know this is more of a materializecss bug, but still the suggested workaround used to do fine until whatever caused it to stop working with the 0.0.24 release.

[boustanihani]

Same issue here (after upgrading to 0.0.24)

[djhi]

Probably related to #58.

I noticed the bug as stated in the comment but I can't figure out how to fix it.

[serkandurusoy]

Hmm, is it possible that the debounce is causing the final extra caret?

Instead of debouncing, you could use afterflush perhaps or defer?

[0o-de-lally]

Any ideas for a quick fix?

This is what I am seeing with: gildaspk:autoform-materialize 0.0.24 materialize:materialize 0.97.0

[serkandurusoy]

I ditched material_select for the browser-select and added some custom styles to make it look like material select.

add this to your schema key:

autoform : {
  class: 'browser-default'
}

and in your css

select.browser-default {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  padding-left: 0;
  text-indent: 0;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  margin-bottom: 15px;
}

select.browser-default option {
  padding-left: 0;
  text-indent: 0;
}

select.browser-default+label {
  transform: translateY(-140%);
  font-size: 0.8rem;
}

select.browser-default:focus {
  outline: none;
  border-bottom: 1px solid #26a69a;
  box-shadow: 0 1px 0 0 #26a69a;
}

select.browser-default option:focus {
  outline: none;
}

select.browser-default:focus+label {
  color: #26a69a;
}

[0o-de-lally]

@serkandurusoy Thanks, it is an improvement, though I do prefer the original Materialize select. @djhi how can I help contribute to this?

[serkandurusoy]

In my case, I'm actually happier with this because material select is really hard to use on mobile. Furthermore, dropdown direction is always down and if the number of options are high, it quickly becomes unusable. But I do agree that this needs to be solved.

[boustanihani]

This will be solved with the next materialize version upgrade: https://github.com/Dogfalo/materialize/commit/cbcf4c8f6c229f42dba1dd3ccde1788d7f96ff80

I just did an upgrade request: https://github.com/Dogfalo/materialize/issues/1999

[serkandurusoy]

@boustanihani unfortunately that patch does not fix this problem. I've already tried with a checkout of the materializecss repo and I can confirm that this problem persistes with autoform-materialize. But it is fixed if the select is created outside autoform as a normal select.

[boustanihani]

Okay thanks for the clarifications

[Chun-Yang]

I fixed the problem on https://github.com/poetic/meteor-materialize-sass. You can try this if you use sass.

[boustanihani]

@Chun-Yang Could you please tell us how ? (or through which commit...)

[Chun-Yang]

https://github.com/poetic/meteor-materialize-sass/commit/9bbfffa6d809a3628a0fee18ddac9af5c8c0a7d3

[Chun-Yang]

It is a problem of materialize itself. Check my previous answers for temporary solutions.

[djhi]

You can also check the troubleshooting section in the README

[0o-de-lally]

@Chun-Yang I'm getting multiple failures after >meteor update

gildaspk:autoform-materialize upgraded from 0.0.24 to 0.0.25 materialize:materialize upgraded from 0.97.0 to 0.97.1

EDIT: This is caused by upgrading meteor and not autoform materialize.

[serkandurusoy]

@keyscores this is a problem with materialize itself. revert back to 0.97.0. You can follow the progress over here: https://github.com/Dogfalo/materialize/issues/2037

[0o-de-lally]

Sorry my bad, just caught it as well. Editing comment