DataTable RadioButton Bootstrap Theme 3.47 Style Bug

[bwhitt]

Describe the bug

I happened to pull the @latest from npm 3.47 instead of 3.46 and the single select mode of the data table's radio button was messed up. The box and the selection circle were not on top of each other

Version 3.46 is good to go. I am using Bootstrap 4 theme FYI

3.47 version: (I added the radio button again on its own on the next column "selected" to confirm)

3.46 version:

Also the "selected" background color change for the row doesn't show on 3.47 like it does on 3.46

Reproducer

https://codesandbox.io/p/devbox/z2ffnt?file=%2Fsrc%2FApp.vue%3A14%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clranqwny0006356hn77v7tao%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clranqwny0002356hvekiv8a8%2522%257D%255D%257D%252C%2

PrimeVue version

3.47

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chome

Steps to reproduce the behavior

Add Datatable

Load Primevue Bootstrap Theme

Add Single Select

Add Radio Button Column Selection

Expected behavior

Radio button style to remain correct

[mertsincan]

Thanks a lot for the report! I set a milestone for this. We'll fix it before the milestone is released.

[caputech]

Similar theming issues with Checkbox, Radio Buttons, etc, in the Breaking change for these components.

[mertsincan]

Hi, Unfortunately, I didn't open the codesandbox project. Could you please attach it or a new sample stackblitz link for use to replicate?

Best Regards,

[dt-ebermudez]

Hi, I have the same problem since I updated from version 3.46 to 3.47.

Thank you

[mertsincan]

Hi,

Unfortunately, I couldn't replicate it. Could you please attach a sample project for us to replicate? Also, which theme are you using? Do you use any Premium PrimeVue Layout?

It was moved to the next milestone. Could you give me more details about it?

[caputech]

We are using the Ultima theme and all radio/checkboxes exhibit the behavior as if the styles are all missing.

[caputech]

I added another issue, but the easiest reproducer is to run the latest Ultima theme (v5.2.0). v3.48.0 seems to have removed styles from virtually all components.

[da5idb]

We are also experiencing this issue: Seems like it is using default browser input field Using lara theme and unstyled

EDIT: Seems like in our case we just did not update the Passthrough options with the (now apparently required) input property. Also in the case of the checkbox we had to move the props from input to box - which makes sense. Not sure how this worked before tbh

[tugcekucukoglu]

We need more time to investigate this issue. I am setting a new milestone.

Thank you.

[bwhitt]

---- nevermind i found it - you have to pass the checkbox ones inside the itemCheckbox pt obj, like so. Obviously with classes you want, not d-none haha.

itemCheckbox: { input: 'd-none', box: 'd-none', },

--------- original question: @da5idb I think i am following what you are saying with the new passthrough properties required, but not listed.

How did you target those components though? The passthrough options is not updated / documented and i tried a couple names with no luck in getting the passthrough classes to be added.

Assuming its switched to this https://primevue.org/checkbox/#pt.doc.checkbox

The ones I've tried without getting d-none to show up itemCheckbox: { class: 'd-none'}, input: {class: 'd-none'}, box: {class: 'd-none'}, itemCheckBoxInput: { class: 'd-none'}, itemCheckBoxBox: { class: 'd-none'}, headerCheckbox: { class: 'd-none' },

[da5idb]

@bwhitt I took the pt options from the lara preset here: https://github.com/primefaces/primevue-tailwind/blob/main/presets/lara/checkbox/index.js So your options would need to be aligned with these

[tugcekucukoglu]

Thanks for the updates.