We have an LWC component that leverages the lightning-record-form to allow records of a specific custom object to be created or edited. The form uses an object layout to define the fields to edit, and this includes several Time type fields. These Time fields cannot be edited, with an error being shown in the browser console during the page loading.
The template for the LWC contains this fragment of markup:
<template if:true={showForm}>
<!--
! A lot of hoops to jump through to present the record form as a modal overlay, as
! per https://lightningdesignsystem.com/components/modals/#Headless.
!-->
<section role="dialog"
tabindex="-1"
aria-label={Label.Scheduling_Edit}
aria-modal="true"
aria-describedby="modal-content-id-1"
class="slds-modal slds-fade-in-open slds-modal_medium">
<div class="slds-modal__container">
<header class="slds-modal__header slds-modal__header_empty">
<!--
! Use of a lightning button messes up the UX. In order to highlight
! that this is clickable it is necessary to explicitly style the
! icon with a pointer cursor - it doesn't work via CSS.
!-->
<lightning-icon icon-name="utility:close"
class="slds-modal__close"
variant="inverse"
alternative-text={Label.StandardClose}
style="cursor: pointer"
onclick={handleCancel}>
</lightning-icon>
</header>
<div class="slds-modal__content slds-p-around_medium"
id="modal-content-id-1">
<lightning-record-form record-id={recordId}
object-api-name="namespace__CustomObject__c"
layout-type="Full"
mode="edit"
onsuccess={handleSuccess}
oncancel={handleCancel}
onerror={handleError}>
</lightning-record-form>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
The LWC's JS provides various handler functions, labels and properties used by the template, and only imports JavaScript held within other "code only" LWC components.
When the page is rendered we get the following error in the browser console (yes, Chrome):
Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-blahblah' chrome-extension: 'unsafe-eval' *.canary.lwc.dev *.visualforce.com https://ssl.gstatic.com/accessibility https://static.lightning.force.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
We get similar issues when using Firefox too.
Putting focus to a Time field input allows characters to be deleted, but no text can be entered.
It rather looks like a security change in the Lightning Platform has broken Time field editing in the lightning-record-form. This worked with Summer '20 and earlier.
Anyone else hitting this issue?
