Fix missing datalist for visibility rule value inputs

[choonkeat]

Problem

When configuring visibility rules that reference choice fields (Radio buttons, Dropdown, Checkboxes), the datalist element providing autocomplete suggestions was not appearing in the DOM. This prevented users from seeing available choices when typing comparison values.

Root Cause

The datalist element was being created but not added to the DOM tree. The code only set the list attribute on the input element but never rendered the corresponding <datalist> element itself.

Solution

Wrap the input element in a div and render both:

1. The input element with the list attribute
2. The datalist element (when available) containing the choice options

This ensures the datalist appears in the DOM and provides autocomplete functionality for visibility rule values.

Testing

• Added comprehensive Playwright tests covering Radio buttons, Dropdown, and Checkboxes scenarios
• Tests verify that datalist elements appear with correct choice options
• Tests run in Firefox for reliability (Chromium/Webkit have timing issues with test infrastructure)
• Manual testing confirms feature works correctly across all browsers

Before

input
    ([ type_ "text"
    , value comparisonValueString
    , ...
    ]
        ++ datalistAttr  -- Only set list="..." attribute
    )
    []  -- No datalist element rendered

After

div []
    (input
        ([ type_ "text"
        , value comparisonValueString
        , ...
        ]
            ++ datalistAttr
        )
        []
        :: (case datalistElement of
                Just element ->
                    [ element ]  -- Render datalist in DOM
                Nothing ->
                    []
            )
    )

[netlify]

✅ Deploy Preview for tiny-form-fields ready!

Name	Link
🔨 Latest commit	6752cd8
🔍 Latest deploy log	https://app.netlify.com/projects/tiny-form-fields/deploys/691317415162420008b178dc
😎 Deploy Preview	https://deploy-preview-52--tiny-form-fields.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.