Safari autofill still running - am I doing something wrong?

[hepcat72]

• [x] Please disable all extensions in your browser, and then try again. If the issues still happen, provide the information below:

Describe the bug

DisableAutoFill is not preventing Safari from trying to autofill my search form text fields. The autofill icon still appears and I get no debug output in the web inspector's console. It's entirely possible I'm doing something wrong, but I believe I followed the instructions in the README correctly.

Information

• OS: macOS Catalina
• Browser: Safari
• Extensions: I only have 1 extension (Honey) but I disabled it and still had the issue.
• Version: 2.0.0 (I used <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/disableautofill.min.js"></script> in my header)

Additional context

I have a search form that dynamically adds form rows. I am using Django. There's only 1 field that I don't want Safari's autofill to try and fill because the more rows in my form, the longer the delay before a user can enter text into an empty search term field.

In my django form class, I added a class attribute with the value "no-autofill" to the field I want to disable the autofill for:

val = forms.CharField(widget=forms.TextInput(attrs={'class':'no-autofill'}))

I confirmed in the web inspector elements that the class is there:

<input type="text" name="form-__prefix__-val" class="no-autofill" id="id_form-__prefix__-val">

I then added the following to the head in my template:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/disableautofill.min.js"></script>

...

    <script>
        document.addEventListener("DOMContentLoaded", function(){

...

            var daf = new disableautofill({
                'form': '#hierarchical-search-form',
                'fields': [
                    'no-autofill',  // mainly for Safari
                ],
                'debug': true,
            });

            daf.init();
        })
    </script>

The form still works as usual, but the autofill is still running.

When I click in the fields, the autofill icon appears on the right side of the clicked text field once autofill has determined there's nothing to add. The larger the form though, the longer the delay between click and the icon appearing and during that delay, anything the user types does not show up. At the largest form size I tested (9 text input fields), the click even results in a cursor beach ball.

I tried to create a screen recording showing the console to attach here, but quicktime is acting up.

I'm wondering if your installation is meant for the use-case I'm trying to employ it in. Does it work on non-password fields? When I click the Safari autofill icon, it prompts me with a dropdown list of phone numbers from my contact card. The field, incidentally, doesn't have a label. The select lists before it act as a variable label. I tried adding a hidden one, but that had no effect as well.

Lastly, here's a screenshot of the form for context:

[hepcat72]

I was able to disable autofill by adding a placeholder attribute to the input field - without using this package.