styleClass="md-inputfield" does not work properly with autocomplete

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
User avatar
bjorntj
Posts: 277
Joined: 30 Jul 2010, 10:46

11 Dec 2017, 15:56

When using p:autoComplete, and md-inputfield, the label is moved up when entering the field. The problem is that the label moves back into the text input field on lost focus, even if the field contains a value. Anyway around this?


Regards,

BTJ
PrimeFaces 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

27 Dec 2017, 15:26

I couldn't replicate this issue. Could you please check the following code in your layout.js?

Code: Select all

if(PrimeFaces.widget.AutoComplete) {
    PrimeFaces.widget.AutoComplete.prototype.setupMultipleMode = function() {
        var $this = this;
        this.multiItemContainer = this.jq.children('ul');
        this.inputContainer = this.multiItemContainer.children('.ui-autocomplete-input-token');

        this.multiItemContainer.hover(function() {
                $(this).addClass('ui-state-hover');
            },
            function() {
                $(this).removeClass('ui-state-hover');
            }
        ).click(function() {
            $this.input.focus();
        });

        //delegate events to container
        this.input.focus(function() {
            $this.multiItemContainer.addClass('ui-state-focus');
            $this.jq.addClass('md-inputwrapper-focus');
        }).blur(function(e) {
            $this.multiItemContainer.removeClass('ui-state-focus');
            $this.jq.removeClass('md-inputwrapper-focus').addClass('md-inputwrapper-filled');
            
            setTimeout(function() {
                if($this.hinput.children().length == 0 && !$this.multiItemContainer.hasClass('ui-state-focus')) {
                    $this.jq.removeClass('md-inputwrapper-filled');
                }
            }, 150); 
        });

        var closeSelector = '> li.ui-autocomplete-token > .ui-autocomplete-token-icon';
        this.multiItemContainer.off('click', closeSelector).on('click', closeSelector, null, function(event) {
            if($this.multiItemContainer.children('li.ui-autocomplete-token').length === $this.cfg.selectLimit) {
                if(PrimeFaces.isIE(8)) {
                    $this.input.val('');
                }
                $this.input.css('display', 'inline');
                $this.enableDropdown();
            }
            $this.removeItem(event, $(this).parent());
        });
    };
};

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests