{"action":"created","issue":{"url":"https://api.github.com/repos/djhi/meteor-autoform-materialize/issues/64","labels_url":"https://api.github.com/repos/djhi/meteor-autoform-materialize/issues/64/labels{/name}","comments_url":"https://api.github.com/repos/djhi/meteor-autoform-materialize/issues/64/comments","events_url":"https://api.github.com/repos/djhi/meteor-autoform-materialize/issues/64/events","html_url":"https://github.com/djhi/meteor-autoform-materialize/issues/64","id":103933887,"number":64,"title":"Extra carets on selects","user":{"login":"serkandurusoy","id":4649948,"avatar_url":"https://avatars.githubusercontent.com/u/4649948?v=3","gravatar_id":"","url":"https://api.github.com/users/serkandurusoy","html_url":"https://github.com/serkandurusoy","followers_url":"https://api.github.com/users/serkandurusoy/followers","following_url":"https://api.github.com/users/serkandurusoy/following{/other_user}","gists_url":"https://api.github.com/users/serkandurusoy/gists{/gist_id}","starred_url":"https://api.github.com/users/serkandurusoy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/serkandurusoy/subscriptions","organizations_url":"https://api.github.com/users/serkandurusoy/orgs","repos_url":"https://api.github.com/users/serkandurusoy/repos","events_url":"https://api.github.com/users/serkandurusoy/events{/privacy}","received_events_url":"https://api.github.com/users/serkandurusoy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-08-30T16:47:53Z","updated_at":"2015-09-03T00:04:00Z","closed_at":null,"body":"While using material selects,\r\n\r\n* especially those whose options are computed,\r\n* or change depending on some other field's value, \r\n* lots of carets appear the parent div of the select\r\n\r\nPrior to 0.0.24, I used the following workaround in my schema definition:\r\n\r\n```javascript\r\nfieldOne: {\r\n  type: String,\r\n  autoform: {\r\n    firstOption: 'Select an option',\r\n    options: function() {\r\n      var optionsObject = someFunctionOrExpressionThatBuildsTheOptionsObject();\r\n      var $this = $('[name=\"fieldOne\"]');\r\n      $this.parent().find('span.caret').remove();\r\n      $this.material_select();\r\n      return optionObject;\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis has been a [known problem](https://github.com/Dogfalo/materialize/issues?q=is%3Aissue+caret+is%3Aclosed) and the above a suggested workaround.\r\n\r\n**BUT**\r\n\r\nAs 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:\r\n\r\n```javascript\r\nfieldOne: {\r\n  type: String,\r\n  autoform: {\r\n    firstOption: 'Select an option',\r\n    options: function() {\r\n      var optionsObject = someFunctionOrExpressionThatBuildsTheOptionsObject();\r\n      var $this = $('[name=\"fieldOne\"]');\r\n      $this.parent().find('span.caret').remove();\r\n      $this.material_select();\r\n      $this.parent().find('span.caret').remove();\r\n      return optionObject;\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n*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.\r\n\r\nNow 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."},"comment":{"url":"https://api.github.com/repos/djhi/meteor-autoform-materialize/issues/comments/137277091","html_url":"https://github.com/djhi/meteor-autoform-materialize/issues/64#issuecomment-137277091","issue_url":"https://api.github.com/repos/djhi/meteor-autoform-materialize/issues/64","id":137277091,"user":{"login":"serkandurusoy","id":4649948,"avatar_url":"https://avatars.githubusercontent.com/u/4649948?v=3","gravatar_id":"","url":"https://api.github.com/users/serkandurusoy","html_url":"https://github.com/serkandurusoy","followers_url":"https://api.github.com/users/serkandurusoy/followers","following_url":"https://api.github.com/users/serkandurusoy/following{/other_user}","gists_url":"https://api.github.com/users/serkandurusoy/gists{/gist_id}","starred_url":"https://api.github.com/users/serkandurusoy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/serkandurusoy/subscriptions","organizations_url":"https://api.github.com/users/serkandurusoy/orgs","repos_url":"https://api.github.com/users/serkandurusoy/repos","events_url":"https://api.github.com/users/serkandurusoy/events{/privacy}","received_events_url":"https://api.github.com/users/serkandurusoy/received_events","type":"User","site_admin":false},"created_at":"2015-09-03T00:04:00Z","updated_at":"2015-09-03T00:04:00Z","body":"I ditched material_select for the browser-select and added some custom styles to make it look like material select.\r\n\r\nadd this to your schema key:\r\n\r\n```javascript\r\nautoform : {\r\n  class: 'browser-default'\r\n}\r\n```\r\n\r\nand in your css\r\n\r\n```css\r\nselect.browser-default {\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  background: none;\r\n  padding-left: 0;\r\n  text-indent: 0;\r\n  border: none;\r\n  border-bottom: 1px solid #9e9e9e;\r\n  margin-bottom: 15px;\r\n}\r\n\r\nselect.browser-default option {\r\n  padding-left: 0;\r\n  text-indent: 0;\r\n}\r\n\r\nselect.browser-default+label {\r\n  transform: translateY(-140%);\r\n  font-size: 0.8rem;\r\n}\r\n\r\nselect.browser-default:focus {\r\n  outline: none;\r\n  border-bottom: 1px solid #26a69a;\r\n  box-shadow: 0 1px 0 0 #26a69a;\r\n}\r\n\r\nselect.browser-default option:focus {\r\n  outline: none;\r\n}\r\n\r\nselect.browser-default:focus+label {\r\n  color: #26a69a;\r\n}\r\n```"}}