My form includes a billing address section with a checkbox that automatically sets the shipping address to match the billing address. If the user unchecks the checkbox, another form will appear below for entering a different shipping address.
The Checkbox
<div class="col-full">
<checkbox
v-model="shippingSameAsBilling"
:label="$t('billingAddress.shippingSameAsBilling')"
:disabled="false"
name="shippingSameAsBilling"
/>
</div>
Conditional Address Form
<address-form
v-if="!shippingSameAsBilling"
:key="submissionAttempts"
:address.sync="shippingAddress"
:address-config="shippingAddressConfig"
:countries="countriesAllowedForShipping"
name="shippingAddress"
data-test="shipping-address"
@updateCountryCode="updateCountryCode"
/>
State Property
data() {
return {
shippingSameAsBilling: true
}
}
While everything functions correctly in Chrome and Firefox, there is an issue with Safari 12.2 where the form does not render when the checkbox is unchecked. I am currently using the Safari web inspector but have been unable to identify the cause of this problem.
<template>
<div
:data-test="name"
:class="{ 'checkbox--disabled': disabled }"
class="checkbox">
<input
ref="checkbox"
:id="name"
:value="true"
:name="name"
:checked="value"
:disabled="disabled"
class="checkbox__input"
type="checkbox"
@input="input()">
<label
:for="name"
class="checkbox__label"
tabindex="0"
@keyup.space="toggle($event)">
<div>
<div>{{ label }}</div>
<div
v-if="subtext"
class="checkbox__subtext">
{{ subtext }}
</div>
</div>
</label>
</div>
</template>
<script>
export default {
name: 'Checkbox',
props: {
/**
* Disabled or not
*/
disabled: {
type: Boolean,
default: false
},
/**
* The label in front of the checkbox
*/
label: {
type: String,
required: true
},
/**
* The name of the element, used for testing and automation
*/
name: {
type: String,
required: true
},
/**
* Subtext rendered under the label
*/
subtext: {
type: String,
default: ''
},
/**
* The bound model object
* @model
*/
value: {
type: Boolean,
required: true
}
},
methods: {
input () {
/**
* Input event on change
*
* @event input
* @type {Boolean}
*/
this.$emit('input', this.$refs.checkbox.checked)
},
toggle () {
const { checkbox } = this.$refs
if (!this.disabled) {
checkbox.checked = !checkbox.checked
}
}
}
}
</script>