InfomediaLtd/angular2-materialize

Datepicker and Select immediately closing on open

GianiNoyez opened this issue · 21 comments

GianiNoyez commented

I have form and when I click on the datepicker or select field, it opens and then immediately closes.

Any idea if this is a bug or am I missing something crucial here?

Datepicker

<input type="text" [(ngModel)]="transaction.dateTemp" name="date" materialize="pickadate [materializeParams]="[{ format: 'dd/mm/yyyy' }]" />

Select

<div class="input-field col s6">
          <select materialize="material_select" [(ngModel)]="transaction.direction" name="direction">
            <option value="outgoing" selected>Outgoing</option>
            <option value="incoming">Incoming</option>
          </select>
          <label>Incoming/Outgoing Transaction</label>
        </div>
jeroendk commented

Got the exact same issue only on Google Chrome though Firefox seems to work fine....

GianiNoyez commented

I just tried and I can confirm what jeroen says. In firefox all seems to be fine.

  • 👍1
jeroendk commented

It looks like this is a problem in Materializecss / pickadate.js check this thread for a quick fix:
Dogfalo/materialize#6312

guigons commented

This is a big problem. The same with me of all my projects!
Datapicker and Select is totally broken on Chrome..

:(

guigons commented

This is a solution for SELECT component:

  • Edit node_modules/materialize-css/dist/js/materialize.js
  • Insert SetTimeout here:
$newSelect.on({
	'focus': function () {
		var _this = this;

		setTimeout(function () {
			if ($('ul.select-dropdown').not(options[0]).is(':visible')) {
				$('input.select-dropdown').trigger('close');
				$(window).off('click.select');
			}
			if (!options.is(':visible')) {
				$(_this).trigger('open', ['focus']);
				var label = $(_this).val();
				if (multiple && label.indexOf(',') >= 0) {
					label = label.split(',')[0];
				}

				var selectedOption = options.find('li').filter(function () {
					return $(_this).text().toLowerCase() === label.toLowerCase();
				})[0];
				activateOption(options, selectedOption, true);

				$(window).off('click.select').on('click.select', function () {
					multiple && (optionsHover || $newSelect.trigger('close'));
					$(window).off('click.select');
				});
			}
		}, 75);
	},
	'click': function (e) {
		e.stopPropagation();
	}
});
GianiNoyez commented

This is a solution for SELECT component:

  • Edit node_modules/materialize-css/dist/js/materialize.js
  • Insert SetTimeout here:
$newSelect.on({
	'focus': function () {
		var _this = this;

		setTimeout(function () {
			if ($('ul.select-dropdown').not(options[0]).is(':visible')) {
				$('input.select-dropdown').trigger('close');
				$(window).off('click.select');
			}
			if (!options.is(':visible')) {
				$(_this).trigger('open', ['focus']);
				var label = $(_this).val();
				if (multiple && label.indexOf(',') >= 0) {
					label = label.split(',')[0];
				}

				var selectedOption = options.find('li').filter(function () {
					return $(_this).text().toLowerCase() === label.toLowerCase();
				})[0];
				activateOption(options, selectedOption, true);

				$(window).off('click.select').on('click.select', function () {
					multiple && (optionsHover || $newSelect.trigger('close'));
					$(window).off('click.select');
				});
			}
		}, 75);
	},
	'click': function (e) {
		e.stopPropagation();
	}
});

If I do this, won't this give problems whenever I deploy it on a server that does npm install to restore packages?

guigons commented

This is a solution for SELECT component:

  • Edit node_modules/materialize-css/dist/js/materialize.js
  • Insert SetTimeout here:
$newSelect.on({
	'focus': function () {
		var _this = this;

		setTimeout(function () {
			if ($('ul.select-dropdown').not(options[0]).is(':visible')) {
				$('input.select-dropdown').trigger('close');
				$(window).off('click.select');
			}
			if (!options.is(':visible')) {
				$(_this).trigger('open', ['focus']);
				var label = $(_this).val();
				if (multiple && label.indexOf(',') >= 0) {
					label = label.split(',')[0];
				}

				var selectedOption = options.find('li').filter(function () {
					return $(_this).text().toLowerCase() === label.toLowerCase();
				})[0];
				activateOption(options, selectedOption, true);

				$(window).off('click.select').on('click.select', function () {
					multiple && (optionsHover || $newSelect.trigger('close'));
					$(window).off('click.select');
				});
			}
		}, 75);
	},
	'click': function (e) {
		e.stopPropagation();
	}
});

If I do this, won't this give problems whenever I deploy it on a server that does npm install to restore packages?

You are absolutely right, this is a temporary solution! for a definitely solution its necessary a new version of materializecss. Or angular2-materialize compatibility with new version of materializecss 1.0

oussamaelhajoui commented

There should be a fix for this otherwise i need to take out materialize out of all my projects.
I can't use the current solution, it's not working.

  • 👍3
marc-wilson commented

Yea, this is quite annoying. If you go to the actual website where they have their demos, you see the exact same behavior:

http://archives.materializecss.com/0.100.2/forms.html

The fix above came with some improvement but it's not a real fix.

jelkinsiv commented

I'm having the same issue. The first time I click if I hold it will stay open, but the next time I click it doesn't open until after I release the click. It seems to alternate between these 2 states: press and hold to keep open and click to open.

goodwillsandy commented

Solution for materializecss calendar opening & closing immediately

The solution is quite simple, It can be resolved using preventDefault() method.
for eg:-
Markup: <input class = 'datepicker' />
then after initialization in jquery just use preventdefault like this
JS:
$('.datepicker').on('mousedown',function(event){ event.preventDefault(); })

and it will work

@oussamaelhajoui @jelkinsiv @guigons
just let me know if this helps

  • 👍31
  • 😄5
  • 🎉11
  • ❤️8
  • 🚀3
  • 👀2
guddu-patel commented

Great its working for me... thanks alot

  • 🎉1
armando-navarro-frequence commented

I thought this may help some who stumbled on this page. I am using angular2-materialize and my materialize select input sometimes closes immediately after opening.

I solved this by adding a click listener on a div that wraps the select tag, with nothing but event.stopPropagation() in the listener. This fixed the issue for me.

  • 👍7
  • 🎉2
  • ❤️3
guddu-patel commented
oussamaelhajoui commented

When adding preventDefault on the parent of a select tag, it wont close anymore..

  • 👍1
Argjendhaxholli commented

Guys i find it solution for this problem and works for chrome.
You need to edit function which open datepicker and incrase the timeout.
Line 6522:
setTimeout(function () {

      // Add the “opened” class to the picker root.
      P.$root.addClass(CLASSES.opened);
      aria(P.$root[0], 'hidden', false);
    }, 100);
  • 👍1
burnEAx commented

Try this.
$(document).on("click", ".select-wrapper", function (event) { event.stopPropagation(); });

  • 👍2
  • 🎉1
  • ❤️3
robertofabrizi commented 
    $('.datepicker').on('mousedown',function(event){
        event.preventDefault();
    });

This solution works partially. I have two datepickers in my form, when I click the first it works as it used to, but then if I click the first one again, nothing happens. If I click the second, it shows, and then clicking the first it shows again, and so on so forth.

daya-s commented

Solution for materializecss calendar opening & closing immediately

The solution is quite simple, It can be resolved using preventDefault() method.
for eg:-
Markup: <input class = 'datepicker' />
then after initialization in jquery just use preventdefault like this
JS:
$('.datepicker').on('mousedown',function(event){ event.preventDefault(); })

and it will work

@oussamaelhajoui @jelkinsiv @guigons
just let me know if this helps

Thanks, mate:)

  • 👍4
  • 😄2
  • 🎉4
  • ❤️2
  • 🚀3
Naz786 commented

Thanks @daya-s this worked for me. I got this problem after I opened my project after 2 years today, but I didn't have this problem before. What do you think caused this?

Rafael-lactec-ssa commented

its too late... but the follow works fine to me in 2021:

$(document).on("mouseup", ".datepicker", function (event) { event.stopPropagation(); });