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: https://github.com/Dogfalo/materialize/issues/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.

[goodwillsandy]

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 notifications@github.com 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 https://github.com/InfomediaLtd/angular2-materialize/issues/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..

[Argjendhaxholli]

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]

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

[robertofabrizi]

    $('.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]

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]

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]

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

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