Skip to content

Commit

Permalink
Fix select on iOS 13
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dogfalo
Dogfalo committed Sep 29, 2019
1 parent 25b3ac8 commit c0da340
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 10 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"no-var": "warn",
"no-extra-semi": "warn",
"no-unused-vars": "warn",
"no-new-object": "warn"
"no-new-object": "warn",
"no-undef": "error"
}
}
3 changes: 3 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,6 @@ _SpecRunner.html
# Ignore compiled files
css/ghpages-materialize.css
bin/

# Ignore lock
yarn.lock
25 changes: 16 additions & 9 deletions js/select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,14 @@
*/
_handleOptionClick(e) {
e.preventDefault();
let option = $(e.target).closest('li')[0];
let key = option.id;
if (!$(option).hasClass('disabled') && !$(option).hasClass('optgroup') && key.length) {
let optionEl = $(e.target).closest('li')[0];
this._selectOption(optionEl);
e.stopPropagation();
}

_selectOption(optionEl) {
let key = optionEl.id;
if (!$(optionEl).hasClass('disabled') && !$(optionEl).hasClass('optgroup') && key.length) {
let selected = true;

if (this.isMultiple) {
Expand All @@ -131,9 +136,9 @@
$(this.dropdownOptions)
.find('li')
.removeClass('selected');
$(option).toggleClass('selected', selected);
$(optionEl).toggleClass('selected', selected);
this._keysSelected = {};
this._keysSelected[option.id] = true;
this._keysSelected[optionEl.id] = true;
}

// Set selected on original select option
Expand All @@ -145,7 +150,9 @@
}
}

e.stopPropagation();
if (!this.isMultiple) {
this.dropdown.close();
}
}

/**
Expand Down Expand Up @@ -265,9 +272,9 @@
}
};

if (this.isMultiple) {
dropdownOptions.closeOnClick = false;
}
// Prevent dropdown from closeing too early
dropdownOptions.closeOnClick = false;

this.dropdown = M.Dropdown.init(this.input, dropdownOptions);
}

Expand Down

14 comments on commit c0da340

@mzi2020
Copy link

@mzi2020 mzi2020 commented on c0da340 Oct 3, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Fixed the problem.

@Mlkito
Copy link

@Mlkito Mlkito commented on c0da340 Oct 4, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Fixed the problem.

Hello moein2020,

sorry for that newbie question but how did you solve the problem without the news materialize.min.js ? Did you modify the source file and compile everything on your own ?

@mzi2020
Copy link

@mzi2020 mzi2020 commented on c0da340 Oct 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Fixed the problem.

Hello moein2020,

sorry for that newbie question but how did you solve the problem without the news materialize.min.js ? Did you modify the source file and compile everything on your own ?

No need to compile. Just download js/select.js and include it after materialize.min.js.
It should be something like this in your HTML:

<body>
...
<script src="js/materialize.min.js"></script>
<script src="js/select.js"></script>
...
</body>

@Mlkito
Copy link

@Mlkito Mlkito commented on c0da340 Oct 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Fixed the problem.

Hello moein2020,
sorry for that newbie question but how did you solve the problem without the news materialize.min.js ? Did you modify the source file and compile everything on your own ?

No need to compile. Just download js/select.js and include it after materialize.min.js.
It should be something like this in your HTML:

<body>
...
<script src="js/materialize.min.js"></script>
<script src="js/select.js"></script>
...
</body>

Thanks a lot for your quick answer. I did that, but unfortunately, it didn't fix the problem for me (safari . iphone XR). Thanks anyway !

@ratstache
Copy link

@ratstache ratstache commented on c0da340 Oct 20, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Mlkito @moein2020

Thanks. Fixed the problem.

Hello moein2020,
sorry for that newbie question but how did you solve the problem without the news materialize.min.js ? Did you modify the source file and compile everything on your own ?

No need to compile. Just download js/select.js and include it after materialize.min.js.
It should be something like this in your HTML:

<body>
...
<script src="js/materialize.min.js"></script>
<script src="js/select.js"></script>
...
</body>

Thanks a lot for your quick answer. I did that, but unfortunately, it didn't fix the problem for me (safari . iphone XR). Thanks anyway !

Did you get this working? If so mind sharing how?

@spyro2000
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same problem here, why is there no bugfix release? :(

@enderdba
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello. There hasn't been a release since last year so I had to compile it myself and import it in my React project. But works flawlessly, thanks @Dogfalo ! But you should be aware that this is an indeed important fix to have on the 1.0.0 release for most updated iOS devices.

@davidus05
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Fixed my inaccurate tap problem on all devices. Thanks!

@aharrah
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dropdown.js might require a similar fix.

On iOS13 devices the option list for Dropdown button has the same behavior that select did prior to this fix.

@pwcreative
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aharrah apparently removing the animate in/out from the dropdown fixes the issue. See my comments on #6494

@wakuu
Copy link

@wakuu wakuu commented on c0da340 Mar 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello. There hasn't been a release since last year so I had to compile it myself and import it in my React project. But works flawlessly, thanks @Dogfalo ! But you should be aware that this is an indeed important fix to have on the 1.0.0 release for most updated iOS devices.

Hi @enderdba , i'm having the same issue and I'm using react.
Can you tell me how to do ?

@razvanioan
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wakuu in order to compile (assuming that you've already cloned v1-dev repository) you better use yarn instead of npm (which raises a lot of errors)

yarn install && grunt release

Now you have the updated code in /dist/ folder ;)

@BWeeks101
Copy link

@BWeeks101 BWeeks101 commented on c0da340 Apr 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fixed select.js was unfortunately not working for me, so I worked around it with the following CSS:

.select-wrapper * { transition: none !important; transform: none !important; }

@a8568730
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixed select.js https://raw.githubusercontent.com/Dogfalo/materialize/v1-dev/js/select.js works for me.

Please sign in to comment.