Input group mix block-start and inline-start

[blset]

I tried to mix block and in line, but everything is taken into account as block

                <InputGroup>
                    <InputGroupAddon align="block-start" class="font-bold text-indicateurs">
                        <Input disabled=true prop:value=act />
                    </InputGroupAddon>
                    <Input
                        placeholder="..."
                        prop:value=move || input.get()
                        on:input=move |ev| {
                            set_input.set(event_target_value(&ev));
                            open.set(true);
                        }
                    />
                    <InputGroupAddon align="inline-start" class="font-bold text-indicateurs">
                        {icon!(icondata::LuSearch)}
                    </InputGroupAddon>

                </InputGroup>

can you mix block and in line ?

[adoyle0]

What is it that you're trying to achieve? You have two Inputs in a single InputGroup, which is not necessarily wrong I guess but it's not really what it was meant to do. Are you trying to make a Card? Fields may also help.

Moving the first input out of the addon puts everything in line which may also be what you were trying to do. I'm not sure what you're asking, but I did see what that code produces and I agree that's probably not what you wanted it to do lol

[blset]

well, I wanted an autocomplete combo

so a box like for single stage Texarea with a header above that displays the current selection
and the autocomplete field, an input so that the user can type in something.

on the autocomplete input I wanted an icon inline left
so I did without the inline-left because I already used a block-start for the header

ok I should have used a fieldset or a Card but the input group was tempting...

[adoyle0]

Something like this?

#[component]
fn AutocompleteInputGroup() -> impl IntoView {
    let suggestions = ["first word", "second word", "third word"];

    view! {
        <InputGroup>
            <InputGroupAddon align="block-start">
                <For each=move || suggestions key=|word| word.to_owned() let(word)>
                    <Badge>{word}</Badge>
                </For>
            </InputGroupAddon>
            <div class="flex w-full">
                <Input value="hey" />
                <InputGroupAddon align="inline-start">{icon!(icondata::LuSearch)}</InputGroupAddon>
            </div>
        </InputGroup>
    }
}

It seems you need to wrap the bottom bit with <div class="flex w-full">. I'm not sure if I can make this more ergonomic without introducing weird bugs, as far as I know it behaves identical to shadcn.

Of course you can use whatever you want instead of badges, I just wanted to see what it looked like

[blset]

I'm using the 0.5 branch
singlestage = { git = "https://github.com/adoyle0/singlestage-ui.git", branch = "0.5" }
is it ok for prod ?

[blset]

ok thanks for the tip (messages crossed with question above)

[adoyle0]

I'm using the 0.5 branch singlestage = { git = "https://github.com/adoyle0/singlestage-ui.git", branch = "0.5" } is it ok for prod ?

Consider it a beta, it's untested and may break, but hopefully not in a big way. In other words I have another branch where I'm working where everything is broken (a small refactor that isn't small anymore) and when that's done I'm going to merge it with 0.5, and hopefully there aren't bugs but I can't promise that. Some styling is going to change, some behavior may change, and there are a few API changes (I'm reverting some that are listed in #51 don't worry).

The 0.5 branch already has some changes from 0.4 that you've suggested, it's up to you. My hope is to merge once and break once, then from there it's just bug fixing/resolving issues, then merge to main and release. It's just taking a long time, the CSS/theme system changes I'm doing run so deep that I'm practically rewriting the entire library lol

ok thanks for the tip (messages crossed with question above)

Would you consider this issue resolved?

[blset]

yes but with a mention in the doc that you can't mix inline and block as is, and should use a flex :)

looking forward to 0.5 ! in the meantime i use the 0.5 branch for prod, no expense spared.
when 0.5 is finished I may be able to help for the documentation if needed.

[adoyle0]

Hm I'll leave it open then to remind me to revisit this to see if it should/can work without the div while matching shadcn behavior, or to write docs