Datepicker and Select immediately closing on open

[GianiNoyez]

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]

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

[GianiNoyez]

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

[jeroendk]

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

[guigons]

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

:(

[guigons]

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]

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]

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]

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]

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]

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.

[iamsandeepkumarofficial]

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]

Great its working for me... thanks alot

[armando-navarro-frequence]

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]

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]

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