Description
I am trying to write a small to-do list project using materialize css library.
In my project, I have a button which triggers a modal containing a form with two picker elements - date and time. The first time I pick either the date or time, everything works, but if I try to edit my initial choice - the browser freezes. I use the latest version of Firefox. Also, I pass option parameter container to both pickers to make sure they render using all available space instead of only using the space provided by the modal which calls them. I hope this makes sense. What did I do wrong? How to ensure my browser doesn't freeze executing the code below.
Docs
Code
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>task manager</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css'>
<style>
button{ width: 100%; }
input{ text-align: center; }
</style>
</head>
<body>
<div class='container'>
<div class='fixed-action-btn'>
<button class='btn-floating btn-large red'>
<i class='large material-icons'>dehaze</i>
</button>
<ul>
<li>
<button class='btn-floating green modal-trigger' data-target='add-task'>
<i class='material-icons'>add</i>
</button>
</li>
</ul>
</div>
<div class='modal' id='add-task'>
<div class='modal-content'>
<h3>NEW TASK</h3>
<div class='row'>
<div class='col s12'>
<div class='input-field'>
<input id='task' type='text'>
<label for='task'>enter task</label>
</div>
</div>
</div>
<div class='row'>
<div class='col s6'>
<div class='input-field'>
<input class='datepicker' id='task-date' type='text'>
<label for='task-date'>select date</label>
</div>
</div>
<div class='col s6'>
<div class='input-field'>
<input class='timepicker' id='task-time' type='text'>
<label for='task-time'>select time</label>
</div>
</div>
</div>
<div class='row'>
<div class='col s12'>
<div class='input-field'>
<select id='priority-task'>
<option value='low'>low</option>
<option value='moderate'>moderate</option>
<option value='hight'>high</option>
</select>
<label for='task-priority'>select priority</label>
</div>
</div>
</div>
<div class='modal-footer'>
<button class='btn waves-effect waves-light'>submit</button>
</div>
</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const container = document.querySelector('.container');
const date_picker = document.querySelector('.datepicker');
const time_picker = document.querySelector('.timepicker');
const modal = document.querySelector('.modal');
const select = document.querySelector('select');
const menu = document.querySelector('.fixed-action-btn');
M.FloatingActionButton.init(menu);
M.FormSelect.init(select);
M.Datepicker.init(date_picker, {container: container});
M.Timepicker.init(time_picker, {container: '.container'});
M.Modal.init(modal);
});
</script>
</body>
</html>
This was fixed in version 1.0.0-rc.1. Use those new CDN links when importing materialize style and script.
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.css https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.js