XF 2.3 Usernames AC AutoSubmit Behavior Oddities

Jaxel

Jaxel

Well-known member
I have a form field, with a username search field. This field has an AC autosubmit function:
Code: 
<xf:form action="{{ link('ewr-medio/add-user', $media) }}" class="block" ajax="true" data-xf-init="medio-taguser">
    <div class="block-container">
        <h3 class="block-minorHeader">{{ phrase('EWRmedio_add_user') }}</h3>
        <div class="block-body block-row">
            <xf:textbox name="usernames" ac="single" id="media-adduser" data-autosubmit="true" />
        </div>
    </div>
</xf:form>
I then prevent the default function on this field to stop the page reload and simply reload a tagged user list:
Code: 
    EWRmedio.TagUser = XF.Element.newHandler(
    {
        init: function()
        {
            XF.on(this.target, 'ajax-submit:response', this.response.bind(this));
        },
       
        response: function(e)
        {
            if (e.data.status == 'ok')
            {
                e.preventDefault();
               
                XF.ajax('GET', e.data.redirect, {}, function(data)
                {
                    if (data.html)
                    {
                        XF.setupHtmlInsert(data.html, (html, container) =>
                        {
                            document.querySelector('#media-userlinks').innerHTML = html.innerHTML;
                            document.querySelector('#media-adduser').value = '';
                        })
                    }
                });
            }
        },
    });

The oddity I am having is related to the dropdown list of usernames that shows up.

If I simply type in the username (ie: "Jaxel"), and hit enter on my keyboard, e.preventDefault() is activated and everything runs proper.

However, if I instead click on the username in the dropdown menu that appears in the autocomplete search dropdown, it does not e.preventDefault() and it activates a page reload instead. Is this a regression error? This issue did not exist in XF2.2.
 
Running some more tests...

When selecting a username from the dropdown list, XF.on(this.target, 'ajax-submit:response', this.response.bind(this)); does not get fired.

It would get fired in XF2.2.
 
shqawe said:
Try to change 'ajax-submit:response' with 'auto-complete:insert'
Click to expand...
Nope. Now it doesn't trigger in either case.

What I'm thinking is clicking on the dropdown list isn't being registered as an ajax-submit in the first place. The response doesn't appear to be XHR.
 
I try this code and i got response

JavaScript: 
((window, document) =>
    {
        "use strict";
    XF.TestJs = XF.Element.newHandler({
        options: {},
        
        init()
        {
            XF.on(this.target, 'auto-complete:insert', this.response.bind(this));
        },

        response(e){
            console.log(e);
        }
    });
    
    XF.Element.register('test-js', 'XF.TestJs');
}
)(window, document);

But i forget to mentioned that i added data-xf-init="test-js" to username textbox.
 
shqawe said:
I try this code and i got response

JavaScript: 
((window, document) =>
    {
        "use strict";
    XF.TestJs = XF.Element.newHandler({
        options: {},
       
        init()
        {
            XF.on(this.target, 'auto-complete:insert', this.response.bind(this));
        },

        response(e){
            console.log(e);
        }
    });
   
    XF.Element.register('test-js', 'XF.TestJs');
}
)(window, document);

But i forget to mentioned that i added data-xf-init="test-js" to username textbox.
Click to expand...
That doesn't solve the problem; that only logs when inserting text into the field.
The problem is with data-autosubmit="true" doesn't insert text into the field, it autosubmits the text to the form.
When autosubmit is true, it's not being read as XHR; and thus there is no response to preventDefault.
 
This is the function it's running through:

Code: 
    public function actionAddUser(ParameterBag $params)
    {
        $this->assertPostOnly();
        
        // STUFF HAPPENS
        
        if ($this->request()->isXhr())
        {
            return $this->redirect($this->buildLink('ewr-medio/userlinks', $media));
        }
        else
        {
            return $this->redirect($this->buildLink('ewr-medio', $media));
        }
    }
It's not XHR. when selecting from the dropdown. It is XHR when manually typing and hitting enter on the field (not hitting enter on the dropdown).
 
Anyone got any ideas on this one? It's the last niggling issue I have with my XF2.3 update for XenMedio.
 
As a test, I added this to the javascript:
JavaScript: 
    EWRmedio.TagUser = XF.Element.newHandler(
    {
        init: function()
        {
            XF.on(this.target, 'submit', this.submit.bind(this));
            XF.on(this.target, 'ajax-submit', this.submit.bind(this));
        },
   
        submit: function(e)
        {
            e.preventDefault();
            alert('test');
        },
    });
 
    XF.Element.register('medio-taguser', 'EWRmedio.TagUser');
HTML: 
    <xf:form action="" class="block" ajax="true" data-xf-init="medio-taguser">
        <xf:textbox name="usernames" ac="single" id="media-adduser" data-autosubmit="true" />
    </xf:form>
This never gets fired when clicking on the autocomplete entries. Then what is being submitted and from where?

Above is all the code needed to test this.
 
Last edited:
Upon further testing, when clicking on an AC entry with auto-submit, XF.AjaxSubmit {submit} never gets fired either.

This definitely seems like a bug in core XF. @Jeremy P
 
I found the bug!

In js\xf\core_handlers.js line 2212:
Code: 
			if (this.options.autosubmit)
			{
				this.target.closest('form').submit()
			}

This should actually be:
Code: 
			if (this.options.autosubmit)
			{
				XF.trigger(this.target.closest('form'), 'submit');
			}
 
Jaxel

Fixed Thread 'Auto-Complete with Auto-Submit Textboxes Don't Send Proper AJAX-Submit'

If you have an auto-complete textbox with auto-submit, within an ajax-submit form, ajax-submit will not be processed when clicking on an auto-complete entry.

Issue is explained here:

Fix is below: In js\xf\core_handlers.js line 2212:
Code: 
			if (this.options.autosubmit)
			{
				this.target.closest('form').submit()
			}

This should actually be:
Code: 
			if (this.options.autosubmit)
			{
				XF.trigger(this.target.closest('form'), 'submit');
			}
  • Like
 
You must log in or register to reply here.
Back
Top Bottom