Skip to content

JSX popover={true} sets invalid HTML attribute #2440

@fongandrew

Description

@fongandrew

Describe the bug

Setting popover={true} in your JSX will generate popover="true" in the HTML. This sort of works in most browsers, but it is invalid and can cause Chrome (with SSR-generated HTML at least) and other tools to complain.

Per https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover, the only valid values for popover are "" (same as "auto") , "manual", "auto", and "hint" (experimental) .

However, the TypeScript definitions for this attribute are boolean | "manual" | "auto" | undefined, and setting it to a boolean gives you values of "true" and "false" instead of "" or unsetting it.

Your Example Website or App

https://playground.solidjs.com/anonymous/1748d882-88b6-4aea-b8e2-c792e17c38ea

Steps to Reproduce the Bug or Issue

Set popover={true}, popover={false}, or just popover as a JSX attribute.

Expected behavior

As a developer, I expect:

  • popover={true} and popover to generate popover="" or just popover in the HTML.
  • popover={false} to unset the attribute
  • popover="" to validate with TypeScript.

Screenshots or Videos

No response

Platform

  • OS: macOS
  • Browser: Chrome
  • Version: 133.0.6943.127

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions