Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Pico Search component doesn't work as expected #484

Open
4 tasks done
StanleyTack opened this issue Sep 30, 2024 · 2 comments
Open
4 tasks done

[BUG] Pico Search component doesn't work as expected #484

StanleyTack opened this issue Sep 30, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@StanleyTack
Copy link

StanleyTack commented Sep 30, 2024

Describe the bug
Using the Pico Search component does not reproduce UI elements like in teh pico docs https://picocss.com/docs/group#search

Minimal Reproducible Example

from fasthtml.common import *
app, rt = fast_app(
    hdrs=(picolink,),
)
def search_form():
    return Search(
        Input(name="search", type="search", placeholder="search"),
        Input(type="submit", value="search"),cls="container")

result:

<search class="container">       
       <input name="search" type="search" placeholder="search">
       <input type="submit" value="search">
</search>

image

Expected behavior
Expected:
image

Visually, the textbox has the correct style but the submit button does not.
Expected html per picocss docs

<form role="search">
  <input name="search" type="search" placeholder="Search" />
  <input type="submit" value="Search" />
</form>

Environment Information
Please provide the following version information:

  • fastlite version: 0.0.11
  • fastcore version: 1.7.10
  • fasthtml version: 0.6.9

Confirmation
Please confirm the following:

  • I have read the FAQ (https://docs.fastht.ml/explains/faq.html)
  • I have provided a minimal reproducible example
  • I have included the versions of fastlite, fastcore, and fasthtml
  • I understand that this is a volunteer open source project with no commercial support.

Additional context
Add any other context about the problem here.

Screenshots
If applicable, add screenshots to help explain your problem.

@StanleyTack StanleyTack added the bug Something isn't working label Sep 30, 2024
@StanleyTack
Copy link
Author

Workaround:

  • use a Group instead of Search.
  • then instead of Input with type=Submit, use a Button with type=Submit and role=Search
  • also need to wrap the Group in a Form to make it a form
search_form = Form(method="get", action="/", id="search-form")(
        Group(
            Input(type="search", name="search", placeholder="search", value=search_query),
            Button("Search", type="submit", role="search"),
        ),
    )

result HTML:

<form enctype="multipart/form-data" method="get" action="/" id="search-form" name="search-form">
     <fieldset role="group">
           <input type="search" name="search" placeholder="search">
           <button type="submit" role="search">Search</button>
     </fieldset>
</form>

@pydanny
Copy link
Collaborator

pydanny commented Oct 7, 2024

I just validated this error here, while also confirming that other fasthml.components work:

from fasthtml.common import *
from fasthtml.components import Search

app, rt = fast_app()

@rt
def index():
    return Titled("Search",
        co.Search(Input(type="search"), Button("Search")),
        Grid(Div('one'), Div('2'))
    )

serve()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants