TypeError: blur is not a function

Question

In my JQuery UI autocomplete function, I use .blur() to close IOS keyboard when a selection is made:

// Purpose: Instantiate Autocomplete
    function autocomplete() {
        searchInput.autocomplete({
            source: autocompleteCourts,
            minLength: 3,
            select: function (event, ui) {
                location.hash = "trigger-header";
                isEFile(event, ui);

                // Close keyboard on IOS when an option is selected
                ui.blur();
            }, open: function (event, ui) {
                $("li.ui-menu-item:odd").addClass("ui-menu-item-alternate");
                $(".ui-menu-item-alternate").css("background-color", "#f2f4f7");
                $("ul.ui-menu").addClass("mt-2 w-auto");
                $("ul.ui-menu").css("z-index", 0);
            }
        });

The browser is throwing the error Uncaught TypeError: ui.blur is not a function.

Should I check if the function blur() exists before calling it?

Are you loading your Javascript code before or after the page loads? — ondrejm, Apr 30 '19 at 15:54
`ui = An Object with label and value properties for the selected option.` It's not the actual input, you could maybe try `event.currentTarget.blur()` — Keith, Apr 30 '19 at 15:57
@merkur0 I have everything wrapped in a `$(document).ready();` — Kellen Stuart, Apr 30 '19 at 16:01
@Lewis it may not be an element. What's a good way to verify? `console.log(ui);`? — Kellen Stuart, Apr 30 '19 at 16:29
There's a nice answer to that [here](https://stackoverflow.com/questions/1853223/check-if-object-is-a-jquery-object). I believe blur() is only assigned to elements, and will be undefined on anything else. — Lewis, Apr 30 '19 at 16:32
@Barmar Let me give that a shot. See if the error goes away. Not sure if I can test it because I don't have a physical iPad to go look at it — Kellen Stuart, Apr 30 '19 at 18:00
@Barmar Just tried it, and the error went away. I'd be curious if the keypad closes on IOS... unfortunately the emulator in Chrome won't replicate the keypad, so I'm s**t out of luck until I get a hold of my buddies iPad — Kellen Stuart, Apr 30 '19 at 18:03
@Barmar If you want to write that out as an answer. I will accept it and then I'll come back and update if it didn't work. Want you to get the credit at least — Kellen Stuart, Apr 30 '19 at 18:04

score 2 · Accepted Answer · answered Apr 30 '19 at 18:22

2

ui is the DOM element that the autoComplete is attached to, not the jQuery object. You need to call jQuery() in order to call methods like .blur(). So change

ui.blur();

to

$(ui).blur();

This is pretty common throughout jQuery -- callbacks generally receive DOM elements rather than the jQuery wrapper objects. E.g. when you use .each(), the second argument to the callback function is the DOM element.

answered Apr 30 '19 at 18:22

Barmar

741,623
53
500
612

Can also use `$(this).blur();`. – Twisty Apr 30 '19 at 18:31
Is it possible to do this without jquery in React Native? I am using this ```fieldRef.current?.blur();``` and I get an error that ```TypeError: _fieldRef$current.blur is not a function```. This was my original problem: https://stackoverflow.com/questions/63757905/property-blur-does-not-exist-on-type-input @Twisty – Sep 06 '20 at 15:46
See https://code.tutsplus.com/tutorials/from-jquery-to-javascript-a-reference--net-23703 for translating jQuery to vanilla JS. – Barmar Sep 07 '20 at 02:59

TypeError: blur is not a function

1 Answers1