Fixing paste issue

This commit is contained in:
Michaela Brydon 2023-11-30 14:45:57 -05:00
parent 9b438991b3
commit fff280ceaf
2 changed files with 71 additions and 88 deletions

View file

@ -201,27 +201,10 @@ export default {
evt.stopPropagation(); evt.stopPropagation();
evt.preventDefault(); evt.preventDefault();
const input = document.getElementById(evt.srcElement.id); const data = evt.type === 'paste' ? (evt.clipboardData || window.clipboardData) : evt.dataTransfer;
const originalValue = input.value; const value = data.getData('Text')?.trim();
const startPosition = input.selectionStart;
const endPosition = input.selectionEnd;
const selectionLength = endPosition - startPosition;
let data = null; this.$emit('update:modelValue', this.modelValue + value);
if (evt.type === 'paste') {
data = evt.clipboardData || window.clipboardData;
} else {
data = evt.dataTransfer;
}
const textValue = data.getData('Text');
// Insert the pasted/dropped string at the index position
const arrOriginalString = originalValue.split('');
arrOriginalString.splice(startPosition, selectionLength, textValue);
const blendedString = arrOriginalString.join('');
this.$emit('update:modelValue', blendedString);
}, },
clickedSearch() { clickedSearch() {
if (this.meta.valid) { if (this.meta.valid) {

View file

@ -31,83 +31,83 @@
:includeSearchIcon="true" :includeSearchIcon="true"
:displayQuestionText="false" :displayQuestionText="false"
isRequired isRequired
:isDisabled="reloadingProviders"
:validationRules="rules.zipCode" :validationRules="rules.zipCode"
@clickEvent="searchClick" /> @clickEvent="searchClick" />
</div> </div>
</div> </div>
</div> </div>
</Form> </Form>
<div> <googleMap
<googleMap id="map"
id="map" class="mb-4"
class="mb-4" :addresses="providerAddresses"
:addresses="providerAddresses" :zipCode="mapZipCode"></googleMap>
:zipCode="mapZipCode"></googleMap> <Form
<Form id="providerSelectionForm"
id="providerSelectionForm" v-slot="{ meta }"
v-slot="{ meta }" @submit="onSubmit"
@submit="onSubmit" @invalidSubmit="onInvalidSubmit">
@invalidSubmit="onInvalidSubmit"> <div class="container-fluid pb-2">
<div class="container-fluid pb-2"> <div class="mx-5">
<div class="mx-5"> <dropdownQuestion
<dropdownQuestion id="searchRadiusFilter"
id="searchRadiusFilter" v-model="filter"
v-model="filter" :cmsWidgetName="widget.filterByQuestion"
:cmsWidgetName="widget.filterByQuestion" inputId="filterByQuestionField"
inputId="filterByQuestionField" :options="filterOptions"
:options="filterOptions" disableAutoFill
disableAutoFill :isDisabled="reloadingProviders"
:validationRules="rules.filter" /> :validationRules="rules.filter" />
<loader <loader
v-if="reloadingProviders" v-if="reloadingProviders"
id="providersLoader" id="providersLoader"
loaderPosition="center" loaderPosition="center"
loaderColor="blue" loaderColor="blue"
:width="2" :width="2"
:height="2" :height="2"
class="my-4" /> class="my-4" />
<div v-else> <div v-else>
<div class="my-4"> <div class="my-4">
<buttonQuestion <buttonQuestion
id="selectProviderQuestion" id="selectProviderQuestion"
v-model="selectedProviderNumber" v-model="selectedProviderNumber"
buttonTypeString="shopListButton" buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton" :buttonTypeObject="shopListButton"
class="radioQuestion" class="radioQuestion"
:answers="providerButtonData" :answers="providerButtonData"
groupName="chooseShop" groupName="chooseShop"
textPosition="text-start" textPosition="text-start"
isRequired isRequired
:validationRules="rules.provider" :validationRules="rules.provider"
:additionalButtonData="additionalButtonData" /> :additionalButtonData="additionalButtonData" />
<alert <alert
v-if="providers?.length === 0 ?? true" v-if="providers?.length === 0 ?? true"
id="alertNoNetworkProviders" id="alertNoNetworkProviders"
:cmsWidgetName="widget.noNetworkShopsAlert" :cmsWidgetName="widget.noNetworkShopsAlert"
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" :isDismissible="false"
:manualHeadline="noNetworkShopsAlertHeaderText" /> :manualHeadline="noNetworkShopsAlertHeaderText" />
</div> </div>
<div <div
class="text-center"> class="text-center">
<textLink <textLink
id="preferredShopNotListedLink" id="preferredShopNotListedLink"
linkType="navigation" linkType="navigation"
href="#!" href="#!"
:text="shopNotListedModalLink" :text="shopNotListedModalLink"
@clickEvent="doNotSeeMyShopLinkClick" /> @clickEvent="doNotSeeMyShopLinkClick" />
</div>
</div> </div>
</div> </div>
<siteFooter
ref="siteFooter"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div> </div>
</Form> <siteFooter
</div> ref="siteFooter"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div>
</Form>
</div> </div>
</div> </div>
</template> </template>