1212 ref =" theInput"
1313 :value =" value"
1414 @blur =" handleChangesOnBlurEvent"
15+ @keyup.enter =" handleChangeOnPressingEnterEvent"
16+ @keydown.enter =" handleChangeOnPressingEnterEvent"
1517 :id =" field.uniqueKey"
16- :disabled =" isReadonly"
18+ :disabled =" isImmutable"
19+ :readonly =" isImmutable"
1720 class =" w-full form-control form-input form-control-bordered"
1821 :dusk =" field.attribute"
1922 autocomplete =" off"
2023 spellcheck =" false"
2124 />
2225
2326 <button
24- class =" rounded inline-flex text-sm ml-3 link-default"
2527 v-if =" field.showCustomizeButton"
2628 type =" button"
2729 @click =" toggleCustomizeClick"
30+ :dusk =" `${field.attribute}-slug-field-edit-button`"
31+ class =" rounded inline-flex text-sm ml-3 link-default"
2832 >
2933 {{ __('Customize') }}
3034 </button >
@@ -40,13 +44,15 @@ import {
4044 HandlesValidationErrors ,
4145} from ' @/mixins'
4246import debounce from ' lodash/debounce'
47+ import get from ' lodash/get'
4348import isNil from ' lodash/isNil'
4449
4550export default {
4651 mixins: [FormField, HandlesFieldPreviews, HandlesValidationErrors],
4752
4853 data : () => ({
4954 isListeningToChanges: false ,
55+ isCustomisingValue: false ,
5056 debouncedHandleChange: null ,
5157 }),
5258
@@ -74,10 +80,24 @@ export default {
7480 }
7581 },
7682
77- async handleChangesOnBlurEvent (event ) {
78- let value = event ? .target ? .value ?? event
83+ handleChangeOnPressingEnterEvent (event ) {
84+ event .preventDefault ()
85+ event .stopPropagation ()
86+
87+ this .listenToValueChanges (event ? .target ? .value ?? event )
88+ },
89+
90+ handleChangesOnBlurEvent (event ) {
91+ this .listenToValueChanges (event ? .target ? .value ?? event )
92+ },
7993
80- if (this .isReadonly ) {
94+ listenToValueChanges (value ) {
95+ if (this .isImmutable === true ) {
96+ return
97+ }
98+
99+ if (this .isCustomisingValue === true ) {
100+ this .value = value
81101 return
82102 }
83103
@@ -91,18 +111,20 @@ export default {
91111 },
92112
93113 toggleCustomizeClick () {
94- if (this .field .readonly ) {
114+ if (this .field .extraAttributes .readonly === true ) {
115+ this .isCustomisingValue = true
95116 this .removeChangeListener ()
96117 this .isListeningToChanges = false
97- this .field .readonly = false
118+ this .field .writable = true
98119 this .field .extraAttributes .readonly = false
99120 this .field .showCustomizeButton = false
100121 this .$refs .theInput .focus ()
101122 return
102123 }
103124
125+ this .isCustomisingValue = false
104126 this .registerChangeListener ()
105- this .field .readonly = true
127+ this .field .writable = false
106128 this .field .extraAttributes .readonly = true
107129 },
108130 },
@@ -112,6 +134,14 @@ export default {
112134 return this .field .shouldListenToFromChanges
113135 },
114136
137+ isImmutable () {
138+ return Boolean (
139+ this .field .readonly === false &&
140+ this .field .writable === true &&
141+ get (this .field , ' extraAttributes.readonly' ) === true
142+ )
143+ },
144+
115145 eventName () {
116146 return this .getFieldAttributeChangeEventName (this .field .from )
117147 },
0 commit comments