Unable to save ACF Field Groups after activating this plugin

[benknight]

After I activate this plugin I'm unable to update or save new ACF Field Groups.

When I open the console, I see the following error when clicking the Update/Publish button on my Field Group:

An invalid form control with name='acf_field_group[graphql_field_name]' is not focusable.

[benknight]

Version information:

wp-graphql-acf 0.3.4 (also tried 0.3.3, same issue)
wp-graphql 0.9.1
acf 5.8.12
wordpress 5.4.2

[benknight]

After digging around a bit more, it looks like I might have narrowed down the cause.

I discovered that the console error "An invalid form control… etc" seems to be a Chrome-specific error meaning that an input element that is marked as "required" is not visible. This is because the normal native browser form validation behavior is to put user keyboard focus on any empty required input on form submission event, but since this element is not visible by default (it's hidden inside the ACF Field Group's "Settings" panel which is collapsed by default), it's unable to focus, hence the error.

Source: https://tiffanybbrown.com/2015/11/an-invalid-form-control-is-not-focusable/index.html

The end result is a silent failure to save/update a Field Group.

The only way to work around this is to give every ACF Field Group a GraphQL Field Name (even if it's not marked "Show in GraphQL". Since someone wouldn't otherwise know this is the cause of the issue described I think it's fair to call it a bug. The fix would likely involve only marking the "GraphQL Field Name" input as required when "Show in GraphQL" is toggled on.

[jasonbahl]

👋🏻 @benknight v0.5.0 (#250) makes significant changes to the GraphQL Field Group Settings.

The graphql_field_name is now conditional based on the show_in_graphql state.

If the Field Group is set to NOT show_in_graphql then the graphql_field_name is NOT required and is hidden.

If the Field Group IS set to show_in_graphql then the graphql_field_name becomes visible and is required.

In action: