Date picker left border in button group

[mrextreme]

Flux version

v2.0.6

Livewire version

v3.6.2

Tailwind version

v4.0.7

Browser and Operating System

Chrome on macOS

What is the problem?

When i put a date picker in a button group, the border on the left does not match the border on the right.

Code snippets

    <flux:button.group class="float-right" size="xs">
        <flux:button icon="chevron-left"></flux:button>
        <flux:date-picker/>
        <flux:button icon-trailing="chevron-right"></flux:button>
    </flux:button.group>

How do you expect it to work?

The border on the left side should match to border on the right

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@mrextreme I would normally use a flux:input.group for this layout, but strangely, now the right-hand border is double thickness:

<flux:input.group size="xs">
    <flux:button icon="chevron-left" />
    <flux:date-picker/>
    <flux:button icon-trailing="chevron-right" />
</flux:input.group>

@joshhanley ?

[kylewallace]

From memory I think this same issue applies to other element combinations such as input/button/button. Might just be a minor styling issue to address.

[joshhanley]

@mrextreme thanks for reporting! @jeffchown is correct, you should be using an input group for that, not a button group.

But as Jeff and @kylewallace noted, there are still issues with the input group borders.

I've investigated it and have a fair idea of what is wrong, but not 100% sure on the fix yet.

I tested a bunch of different variations and got the below results.

This is the Volt component I used.

<?php

use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new
//#[Layout('components.layouts.rtl')]
class extends Component {
    //
}; ?>

<div class="flex flex-col">
    <flux:button.group class="float-right" size="xs">
        <flux:button icon="chevron-left"></flux:button>
        <flux:date-picker/>
        <flux:button icon-trailing="chevron-right"></flux:button>
    </flux:button.group>

    <flux:button.group class="float-right" size="xs">
        <flux:button icon="chevron-left"></flux:button>
        <flux:button/>
        <flux:button icon-trailing="chevron-right"></flux:button>
    </flux:button.group>

    <flux:input.group size="xs">
        <flux:button icon="chevron-left" />
        <flux:date-picker/>
        <flux:button icon-trailing="chevron-right" />
    </flux:input.group>

    <flux:input.group size="xs">
        <flux:button icon="chevron-left" />
        <flux:input />
        <flux:button icon-trailing="chevron-right" />
    </flux:input.group>

    <flux:input.group size="xs">
        <flux:input />
        <flux:input />
        <flux:input />
    </flux:input.group>

    <flux:input.group size="xs">
        <flux:button icon="chevron-left" />
        <flux:input />
        <flux:input />
        <flux:button icon-trailing="chevron-right" />
    </flux:input.group>

    <flux:input.group size="xs">
        <flux:button icon="chevron-left" />
        <flux:select>
        </flux:select>
        <flux:button icon-trailing="chevron-right" />
    </flux:input.group>

    <flux:input.group size="xs">
        <flux:button icon="chevron-left" />
        <flux:select variant="listbox">
        </flux:select>
        <flux:button icon-trailing="chevron-right" />
    </flux:input.group>

    <flux:input.group size="xs">
        <flux:input />
        <flux:button icon="chevron-left" />
        <flux:button icon-trailing="chevron-right" />
    </flux:input.group>

    <flux:input.group>
        <flux:input placeholder="Post title" />

        <flux:button icon="plus">New post</flux:button>
    </flux:input.group>

    <flux:input.group>
        <flux:select class="max-w-fit">
            <flux:select.option selected>USD</flux:select.option>
            <!-- ... -->
        </flux:select>

        <flux:input placeholder="$99.99" />
    </flux:input.group>

    <flux:input.group>
        <flux:input.group.prefix>https://</flux:input.group.prefix>

        <flux:input placeholder="example.com" />
    </flux:input.group>

    <flux:input.group>
        <flux:input placeholder="chunky-spaceship" />

        <flux:input.group.suffix>.brand.com</flux:input.group.suffix>
    </flux:input.group>

    <flux:input.group>
        <flux:input.group.prefix>https://</flux:input.group.prefix>

        <flux:input placeholder="mysite" />

        <flux:input.group.suffix>.brand.com</flux:input.group.suffix>
    </flux:input.group>

    <flux:input.group>
        <flux:input.group.prefix>https://</flux:input.group.prefix>

        <flux:input placeholder="mysite" />

        <flux:input.group.suffix>.brand.com</flux:input.group.suffix>
    </flux:input.group>

    <flux:input.group>
        <flux:input.group.prefix>https://</flux:input.group.prefix>

        <flux:date-picker />

        <flux:input.group.suffix>.brand.com</flux:input.group.suffix>
    </flux:input.group>
</div>

[jeffchown]

Thanks for the thorough variation testing, @joshhanley ! Helps to know in advance when/where we may run into the 'effect' until a fix is available.