Uses deep watcher to fix table scrolling issue (#1413)

* Uses deepwatcher

* Change to use item

* Removes parent from slot

* Version bump

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
  "name": "ppr-ui",
- "version": "2.0.20",
+ "version": "2.0.21",
  "private": true,
  "appName": "Assets UI",
  "sbcName": "SBC Common Components",

ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue

@@ -25,7 +25,7 @@
  :clearable="isClearable"
  @keypress="showAllGroups()"
  >
- <template v-slot:item="{ parent, item }">
+ <template v-slot:item="{ item }">
  <template v-if="item.class === 'registration-list-header'">
  <v-list-item-content>
  <v-row
@@ -47,7 +47,7 @@
  </template>
  <template v-else>
  <v-list-item-content class="py-3 registration-list">
- <span class="registration-list-item" v-html="`${parent.genFilteredText(item.text)}`"></span>
+ <span class="registration-list-item" v-html="item.text"></span>
  </v-list-item-content>
  </template>
  </template>

ppr-ui/src/components/tables/RegistrationTable.vue

@@ -693,20 +693,25 @@ export default defineComponent({
  if (!localState.firstColRef || val < 350) localState.overrideWidth = false
  })
 
+ // Triggers scrolling on changes to the registration history
+ watch(() => props.setRegistrationHistory,
+ () => {
+ if (localState.newReg?.addedReg) {
+ // need both (only one ref will scroll)
+ scrollToRef(newRegItem)
+ scrollToRef(newAndFirstItem)
+ }
+ },
+ { deep: true }
+ )
+
  onUpdated(() => {
  // needed to set overrideWidth to true
  if (localState.firstColRef?.value?.length > 0) {
  if (localState.firstColRef.value[0].clientWidth > 350) {
  localState.overrideWidth = true
  }
  }
-
- // if new reg -> scroll to new reg
- if (localState.newReg?.addedReg) {
- // need both (only one ref will scroll)
- scrollToRef(newRegItem)
- scrollToRef(newAndFirstItem)
- }
  })
 
  return {