Issue with `sr-only` Class on Custom File Input Causing Template Interactions

[beneyraheem]

When using the custom file input component with the class="sr-only", the template experiences unexpected behavior when interacting with ID links. Specifically, clicking on certain elements within the template does not trigger the expected actions. However, when theclass is changed to hidden, the issue resolves itself.

   <input
        x-ref="input"
        x-on:click.stop {{-- Without this, the parent element's click listener will ".prevent" the file input from being clicked... --}}
        type="file"
        class="sr-only"
        tabindex="-1"
        {{ $attributes }} {{ $multiple ? 'multiple' : '' }} {{ $name ? 'name="'.$name.'"' : '' }}
    >

Potential Workaround: Changing sr-only to hidden resolves the issue.

[calebporzio]

Hi there, can you please re-submit this issue with a copy/pastable code snippet I can use to reproduce the issue you are facing? Otherwise, I can't really understand and therefore help. Thanks