[Save Form] ExampleImagery Save Form 'OK' button is made available before Form validation has completed

[unlikelyzero]

Summary

We wrote a test for creating example imagery. When executing this test, we are detecting that console errors are thrown to the browser window.

When quickly creating an example imagery object, this error is thrown to console:

 [error] [Vue warn]: Error in nextTick: \"TypeError: Cannot read properties of undefined (reading 'scrollTop')\"

    found in

    ---> <MctTree> at src/ui/layout/mct-tree.vue
           <FormControlComponent> at src/api/forms/components/controls/Locator.vue
             <Root>,[error] TypeError: Cannot read properties of undefined (reading 'scrollTop')
        at VueComponent.isItemInView (webpack-internal:///./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/ui/layout/mct-tree.vue?vue&type=script&lang=js&:488:53)
        at VueComponent.eval (webpack-internal:///./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/ui/layout/mct-tree.vue?vue&type=script&lang=js&:476:31)
        at Array.eval (webpack-internal:///./node_modules/vue/dist/vue.js:1997:14)
        at flushCallbacks (webpack-internal:///./node_modules/vue/dist/vue.js:1923:16)"

Expected vs Current Behavior

No console errors

Steps to Reproduce

This is really only possible through automation.

1. Create ExampleImagery object
2. Click 'Ok' on Save form immediately as it appears
3. Note the console error thrown

This is an e2e test artifact. To view it, you can run this locally with npx playwright show-trace <path_to_trace>/trace.zip
trace.zip

Or by uploading it to https://trace.playwright.dev/

Environment

System:

• OS: macOS 11.6.5
• CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
• Memory: 737.49 MB / 16.00 GB
• Shell: 5.8 - /bin/zsh

Binaries:

• Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
• npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm

Browsers:

• Chrome: 101.0.4951.54
• Chrome Canary: 103.0.5054.0

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?

Additional Information

[unlikelyzero]

Note: this is possibly related to a known chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=1324419

[shefalijoshi]

@unlikelyzero How do we test this?

[akhenry]

Verified fixed.

Verification steps

1. In chrome I throttled my network connection to "Slow 3G"
2. Created a new Example Imagery object
3. Verified that the OK button is not available until the locator has fully loaded and a folder has been selected.

[unlikelyzero]

@shefalijoshi we upgraded the playwright browser version and added chrome-beta to our test matrix