Hidden and Disabled Button Validation Causing Noisy Console Errors

  • Goal: I'm trying to keep my Apps clean and reduce any Console Error noise

  • Details: I have a module which on app-load has no data it in. The user can then change an input, and the module will populate with some data. THEN down the page there is an app-specific container that is set to be disabled & hidden while the module's data is null. So this app-specific container is Disabled based on {{ !inspector.selectedData }} where the inspector is that afore mentioned module. The app-specific container has a Hidden validation on {{ self.disabled }}

The problem is that within that app-specific container, I have a bunch of other actions the user can take that depend on inspector.selectedData. Mainly just buttons. The buttons have hidden and disabled validations on them that result in console errors on page-load. These validations typically look something like:

{{ inspector.selectedData.archived_at }}

and the errors on page load (when inspector.selectedData is null) look like:

Screenshot 2024-05-03 at 12.00.44 PM

Now to get around this I could just add in more complex logic on the Button hidden/disabled validations that considers the on-load state. something like:

{{ inspector.selectedData ? true : inspector.selectedData.archived_at }} 

But since these buttons are within a disabled container on page-load, it feels like I shouldn't have to add in this to the validation? Is there any way to properly suppress these noisy console errors without adding in way more complex logic than is intuitively needed?