Datepicker and Select immediately closing on open #444

GianiNoyez · 2019-03-21T01:25:52Z

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 · 2019-03-21T09:59:11Z

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

GianiNoyez · 2019-03-21T11:07:57Z

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

jeroendk · 2019-03-25T15:46:34Z

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

guigons · 2019-04-02T18:27:31Z

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

:(

guigons · 2019-04-02T20:31:20Z

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 · 2019-04-03T10:10:49Z

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 · 2019-04-05T17:52:44Z

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 · 2019-04-29T13:38:14Z

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.

marc-wilson · 2019-05-01T15:47:24Z

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 · 2019-05-09T17:46:48Z

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 · 2019-05-13T10:38:30Z

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

guddu-patel · 2019-05-29T05:29:28Z

Great its working for me... thanks alot

armando-navarro-frequence · 2019-05-29T18:50:20Z

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.

guddu-patel · 2019-05-30T05:42:59Z

thanks it works....

…

On Thu, May 30, 2019 at 12:35 AM armando-navarro ***@***.***> wrote: 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 by event.stopPropagation() in the listener. This fixed the issue for me. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#444?email_source=notifications&email_token=AECTW6S3UAVREH2F3UUP4K3PX3F67A5CNFSM4HACITK2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWQJQEY#issuecomment-497063955>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AECTW6SU33QFTAWMGSKZ2UDPX3F67ANCNFSM4HACITKQ> .

-- Regards, Guddu kumar

oussamaelhajoui · 2019-06-15T11:02:00Z

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

Argjendhaxholli · 2019-07-29T15:01:52Z

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);

burnEAx · 2019-08-21T11:02:19Z

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

robertofabrizi · 2019-09-05T08:36:31Z

    $('.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 · 2019-10-22T10:42:17Z

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:)

Naz786 · 2020-05-14T17:16:52Z

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 · 2021-04-19T19:39:06Z

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

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

Nesbi mentioned this issue Jul 10, 2019

Fixed chrome select drop down flickering OCR4all/OCR4all#14

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datepicker and Select immediately closing on open #444

Datepicker and Select immediately closing on open #444

GianiNoyez commented Mar 21, 2019

jeroendk commented Mar 21, 2019

GianiNoyez commented Mar 21, 2019

jeroendk commented Mar 25, 2019

guigons commented Apr 2, 2019

guigons commented Apr 2, 2019

GianiNoyez commented Apr 3, 2019

guigons commented Apr 5, 2019 •

edited

Loading

oussamaelhajoui commented Apr 29, 2019

marc-wilson commented May 1, 2019

jelkinsiv commented May 9, 2019

goodwillsandy commented May 13, 2019

guddu-patel commented May 29, 2019

armando-navarro-frequence commented May 29, 2019 •

edited

Loading

guddu-patel commented May 30, 2019 via email

oussamaelhajoui commented Jun 15, 2019

Argjendhaxholli commented Jul 29, 2019

burnEAx commented Aug 21, 2019

robertofabrizi commented Sep 5, 2019

daya-s commented Oct 22, 2019

Solution for materializecss calendar opening & closing immediately

Naz786 commented May 14, 2020

Rafael-lactec-ssa commented Apr 19, 2021

Datepicker and Select immediately closing on open #444

Datepicker and Select immediately closing on open #444

Comments

GianiNoyez commented Mar 21, 2019

jeroendk commented Mar 21, 2019

GianiNoyez commented Mar 21, 2019

jeroendk commented Mar 25, 2019

guigons commented Apr 2, 2019

guigons commented Apr 2, 2019

GianiNoyez commented Apr 3, 2019

guigons commented Apr 5, 2019 • edited Loading

oussamaelhajoui commented Apr 29, 2019

marc-wilson commented May 1, 2019

jelkinsiv commented May 9, 2019

goodwillsandy commented May 13, 2019

Solution for materializecss calendar opening & closing immediately

guddu-patel commented May 29, 2019

armando-navarro-frequence commented May 29, 2019 • edited Loading

guddu-patel commented May 30, 2019 via email

oussamaelhajoui commented Jun 15, 2019

Argjendhaxholli commented Jul 29, 2019

burnEAx commented Aug 21, 2019

robertofabrizi commented Sep 5, 2019

daya-s commented Oct 22, 2019

Solution for materializecss calendar opening & closing immediately

Naz786 commented May 14, 2020

Rafael-lactec-ssa commented Apr 19, 2021

guigons commented Apr 5, 2019 •

edited

Loading

armando-navarro-frequence commented May 29, 2019 •

edited

Loading