>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3583883. --> Reported by: [jjchinquist](https://www.drupal.org/user/286806) >>> <p>[Tracker]<br> <strong>Update Summary: </strong> Bug report, AI Suggestions button stays hidden on focus for string_long textarea fields.<br> <strong>Short Description: </strong>On-focus un-hide CSS rule in ai_content_suggestions misses .field-widget-action-widget-button for field--type-string-long.<br> <strong>Check-in Date: </strong> 04/09/2026<br> <em>Metadata is used by the <a href="https://www.drupalstarforge.ai/" title="AI Tracker">AI Tracker.</a> Docs and additional fields <a href="https://www.drupalstarforge.ai/ai-dashboard/docs" title="AI Issue Tracker Documentation">here</a>.</em><br> [/Tracker]</p> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>When the <code>display_on_focus</code> setting is enabled on a field widget action plugin attached to a <code>field--type-string-long</code> field (e.g. a plain textarea field like a teaser text), the AI Suggestions button is hidden by default but <strong>stays hidden even when the textarea is focused</strong>.</p> <p>The CSS rule responsible for hiding the button is in <code>modules/ai_content_suggestions/css/field_widget.css</code>:</p> <pre><div class="codeblock"><code class="language-css">/* Only show button when fields are focused */<br>.ai-content-suggestions--on-focus .field-widget-action-widget-button {<br>&nbsp; display: none;<br>}<p>The corresponding rules that un-hide the button on focus cover <code>field--type-string</code>, <code>field--type-text-long</code>, and both <code>.field-widget-action-widget-button</code> and the legacy <code>.ai-content-suggestions.button</code> classes &mdash; <strong>except</strong> for <code>field--type-string-long</code>, where only the <code>.ai-content-suggestions.button</code> variant is listed:</p> <pre><div class="codeblock"><code class="language-css">.field--type-string.ai-content-suggestions--on-focus:has(input:focus) .field-widget-action-widget-button,<br>.field--type-text-long.ai-content-suggestions--on-focus:has(.ck-focused) .field-widget-action-widget-button,<br>.field--type-string.ai-content-suggestions--on-focus:has(input:focus) .ai-content-suggestions.button,<br>.field--type-string-long.ai-content-suggestions--on-focus:has(textarea:focus) .ai-content-suggestions.button,<br>.field--type-text-long.ai-content-suggestions--on-focus:has(.ck-focused) .ai-content-suggestions.button {<br>&nbsp; display: block;<br>}<p>The actual button rendered by the <code>field_widget_actions</code> module uses the class <code>field-widget-action-widget-button</code>, not <code>ai-content-suggestions.button</code>. As a result, on a plain-textarea field (<code>field--type-string-long</code>) with <code>display_on_focus: true</code>, the button is hidden permanently &mdash; the un-hide rule never matches.</p> <p><em>Verified against 1.3.1, 1.3.2, 1.3.x-dev and 1.4.x-dev &mdash; the <code>field_widget.css</code> file is byte-identical across all four, so the bug is present in every currently supported release and dev branch.</em></p> <h4 id="summary-steps-reproduce">Steps to reproduce (required for bugs, but not feature requests)</h4> <ol> <li>Install <code>ai</code> 1.3.1 (or 1.4.x-dev) with the <code>ai_content_suggestions</code> and <code>field_widget_actions</code> sub-modules enabled.</li> <li>On a content type, add a plain textarea field (field type <code>string_long</code>, widget <code>string_textarea</code>) &mdash; for example, a "Teaser text" field.</li> <li>On the node edit form display, enable a <code>prompt_content_suggestion</code> field widget action on that field with <code>display_on_focus: true</code>.</li> <li>Open the node edit form and focus the textarea.</li> </ol> <p><strong>Expected:</strong> The AI Suggestions button becomes visible while the textarea is focused, then hides again on blur (matching the behavior of <code>field--type-string</code> fields such as the node title).</p> <p><strong>Actual:</strong> The button remains hidden regardless of focus state.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Add <code>.field-widget-action-widget-button</code> to the un-hide rule for <code>field--type-string-long</code> in <code>modules/ai_content_suggestions/css/field_widget.css</code>:</p> <pre><div class="codeblock"><code class="language-css">.field--type-string.ai-content-suggestions--on-focus:has(input:focus) .field-widget-action-widget-button,<br>.field--type-string-long.ai-content-suggestions--on-focus:has(textarea:focus) .field-widget-action-widget-button,<br>.field--type-text-long.ai-content-suggestions--on-focus:has(.ck-focused) .field-widget-action-widget-button,<br>.field--type-string.ai-content-suggestions--on-focus:has(input:focus) .ai-content-suggestions.button,<br>.field--type-string-long.ai-content-suggestions--on-focus:has(textarea:focus) .ai-content-suggestions.button,<br>.field--type-text-long.ai-content-suggestions--on-focus:has(.ck-focused) .ai-content-suggestions.button {<br>&nbsp; display: block;<br>}<h3 id="summary-remaining-tasks">Remaining tasks</h3> <ol> <li>Confirm whether the legacy <code>.ai-content-suggestions.button</code> selectors are still needed or whether all current code paths render <code>.field-widget-action-widget-button</code>. If the legacy class is dead, the rule can be simplified.</li> <li>Verify on a <code>string_long</code> field that the button toggles correctly on focus/blur.</li> </ol> <h3>User interface changes</h3> <p>None once fixed: the button becomes visible on focus as intended. Currently, the UI silently omits the button on <code>string_long</code> fields configured for <code>display_on_focus</code>.</p> <h3>API changes</h3> <p>None.</p> <h3>Duplicate check</h3> <p>&#9989; Duplicate check &mdash; no existing issue found. Searched the drupal/ai open issue queue with no relevant results.</p> <p> Related but not duplicate:<br> - #3571915 Allow Field Widget Actions to target a specific automator &mdash; feature request, different scope<br> - #3567027 Field Widget Button labels are not translatable via UI &mdash; translation, not visibility</p> <h3 id="summary-ai-usage">AI usage (if applicable)</h3> <p>[x] AI Assisted Issue<br> This issue was generated with AI assistance, but was reviewed and refined by the creator.</p> <p>[ ] AI Assisted Code<br> This code was mainly generated by a human, with AI autocompleting or parts AI generated, but under full human supervision.</p> <p>[ ] AI Generated Code<br> This code was mainly generated by an AI with human guidance, and reviewed, tested, and refined by a human.</p> <p>[ ] Vibe Coded<br> This code was generated by an AI and has only been functionally tested.</p> </code></div></pre></code></div></pre></code></div></pre>