JS An invalid form control with name='input_name' is not focusable.

[adrhem]

• Laravel Version: 5.6.2
• Voyager Version: 1.1.1

Description:

When I use a field Rich Text Box in the BREAD I can't submit the form because I get the following error on Javascript Console.
An invalid form control with name='input_name' is not focusable.

It works if I fill the hidden input with Inspector Tool or with an script.

Steps To Reproduce:

1. Add Rich Text Box as Field in BREAD
2. Submit even if the field is not empty

[emptynick]

This bug should be fixed since 1.0.16.
Did you recently upgrade?
If so, please republish Voyagers assets (with force-flag) and try again.

[adrhem]

I started the project this week. I'm using Translatable trait on that model if it helps. So I republished the Voyager assets and I get the same error

An invalid form control with name='name_input' is not focusable.

[vaggelis2018]

Same here.

[vaggelis2018]

Quick workaround is to add novalidate to the form

[farismohammed]

same problem
An invalid form control with name='body' is not focusable.
when using validation in posts

[jannejava]

Don't know if I am late to the party. Unfortunately, I have the same problem. The latest version, freshly published assets. Seems to happen in Chrome when TinyMCE that is required, since TinyMCE is hiding the original textarea.

The bug seems to exists.
tinymce/tinymce#2584.

Which workaround has been tried?

[fletch3555]

I don't believe any workarounds have been tried yet. We're open to pull requests though

[emptynick]

Can't we just remove the required prop?
We dont really need the browser to validate the form, we do it anyway.

[ivanmart]

to remove the required prop you need either to override the default view or make field NULLable in database, plus change required setting in the data_rows table

[emptynick]

I know. I mean as a "final" solution, as Voyager does not need the required prop at all.

[alizadehmammadali]

Just add document.getElementById("richtextbody").required = false; to the end of edit-add.blade.php script tag and problem solved 👍
Here is my edit-add.blade.php file

@section('javascript')
    <script>
        $('document').ready(function () {
            $('#slug').slugify();

        @if ($isModelTranslatable)
            $('.side-body').multilingual({"editing": true});
        @endif
        });
        document.getElementById("richtextbody").required = false;
    </script>
@stop

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you have further questions please ask in our Slack group.