InputSwitch doesn't work since 3.47

[johnluxor]

Describe the bug

It just stop working after update to 3.47 or 3.48. If I rollback to 3.46, it works as expected

                    <InputSwitch v-model="form.use_bonus"
                                 class="ml-auto"
                                 :disabled="bonusSwitchDisabled"
                                 @update:model-value="toggleBonuses"
                    />```

### Reproducer

n/a

### PrimeVue version

3.47, 3.48

### Vue version

3.x

### Language

ES6

### Build / Runtime

Vite

### Browser(s)

N/A

### Steps to reproduce the behavior

N/A

### Expected behavior

It should work as expected

[mertsincan]

Hi,

Can you give a more details? Also, can you attach a sample stackblitz link for us? https://primevue.org/inputswitch/ it works fine for me.

[Ky6uk]

It's probably related to other problems after upgrading to 3.47 and up. Almost all the components have been broken (styles) in case the custom styles used class names from the theming documentation. Some class names even went away completely in the minor release like some of these (.p-inputswitch-checked for example):

Also, it looks like the default stylings have been changed also somehow.

[RMFogarty]

Same issue using 3.49 Input switch stopped working and has a strange visual issue with a black mark appearing under the top left side:

[Tarabass]

[joseanzacarias]

Same problem here I'm using Nuxt 3 with tailwind, the input is not working at all.

[AlbertoInfogest]

Hi, we have the same problem! We are using PrimeVue v3.50, with vite and vue3 into unstyled mode. The InputSwitch component is not working at all. Any idea??

[Tarabass]

As a workaround I use the click event to update a ref (in my case state from the pinia store). As I only use the switch ones I didn't write a wrapper around InputSwitch with a modelValue, but in the click you can also update a modelValue of the wrapper if you want to..

<script lang="ts" setup>
import InputSwitch from 'primevue/inputswitch'

const searchStore = useSearchStore()
const { sortOn } = storeToRefs(searchStore)

// TODO : Switch v-model is not working since primevue 3.47 or 3.48
// https://github.com/primefaces/primevue/issues/5234

const inputSwitch = ref<InstanceType<typeof InputSwitch> | null>(null)

const onClick = () => {
  sortOn.value =
    inputSwitch.value?.$props.modelValue === inputSwitch.value?.$props.falseValue
    ? inputSwitch.value?.$props.trueValue
    : inputSwitch.value?.$props.falseValue
}
</script>

<template>
  <PrimeInputSwitch
    :model-value="sortOn"
    @click="onClick"
    true-value="afstand"
    false-value="naam"
    ref="inputSwitch"
  />
</template>

<style lang="scss" scoped></style>

[MonkFox]

I'm facing the same issue. This is happening with the DataTable and its Pagination component as well.

The InputSwitch is only displaying a checkbox when I upgrade to 3.50+, in 3.47 its the InputSwitch with a portion of a square displayed behind it, the input switch overlay is disabled always as well.

The DataTable's display is off. It's almost like any/all styling was removed (everything is being displayed block instead of flex?).

Any suggestions on how I could upgrade and resolve these issues? I'm having to remain at 3.46.0 for the time being.

[johnluxor]

Looks like in this commit

https://github.com/primefaces/primevue/commit/99b1edd5cedddbd12d72b24fcd240abe18b308b5

onClick handler was removed from InputSwitch, so it doesn't react to click.

[tugcekucukoglu]

Could you share a stackblitz link? We cannot replicate the problem.

[johnluxor]

I cannot make it work in Stackblitz with tailwind. I use tailwind and tailwind paththrough. In Stackblitz it shows just checkbox and cannot find any classes Theme has.

https://stackblitz.com/edit/primevue-create-vue-issue-template-bajf2k?file=src%2FApp.vue

[tugcekucukoglu]

Thanks for the clarification.

Tailwind passthrough are not going to be maintained anymore and have already been removed for version 4. We could suggest using Tailwind presets: https://tailwind.primevue.org/builder/

[RMFogarty]

This is not great to leave a component fully not functional when v4 hasn't been released.

[nicck]

For me, making sure input had width:100% fixed the problem: <InputSwitch :inputStyle="{ width: '100%' }" ... Adding unstyled helps too, but obviously input will look like simple checkbox with it.