-
Notifications
You must be signed in to change notification settings - Fork 36
Description
As a developer using the ResourceItem
component nested inside of a ResourceList
with loading=true
on initial mount and render, the loading
injected value in ResourceItem
fails to update and react when the state changes to false
on the ResourceList
.
This is seemingly because the loading
value in ResourceItem
is injected and then subsequently used in a v-if
conditionally rendered template that displays items such as the shortcut-actions
.
This is observable and reproducible by rendering the following Vue component:
<script setup>
import {
Card,
Text,
ResourceList,
ResourceItem,
Bleed,
} from '@ownego/polaris-vue';
import { onMounted, ref, nextTick } from 'vue';
const loading = ref(true);
const items = ref([{
id: 1,
name: 'Test 1',
}]);
onMounted(() => {
loading.value = false;
});
</script>
<template>
<Card>
<Bleed margin-inline="400" margin-block="400">
<ResourceList
:loading="loading"
:resource-name="{ singular: 'test', plural: 'tests' }"
:items="items"
>
<template v-for="item in items" :key="item.id">
<ResourceItem
:id="item.id"
persist-actions
:accessibility-label="`View details for ${item.name}`"
:name="item.name"
:shortcut-actions="[
{
content: 'Test',
accessibilityLabel: 'Test',
onAction: () => {
console.log('test');
},
},
]"
>
<Text variant="bodyMd" font-weight="bold" as="p">
{{ item.name }}
</Text>
</ResourceItem>
</template>
</ResourceList>
</Bleed>
</Card>
</template>
The loading
is true on initial mount and render of the component, but even after the value changes on the ResourceList
to false
on the next tick, the conditionally rendered template for the shortcut-actions
never renders.
The expected behavior, I would presume, is for this state to be reactive on the child ResourceItem
components as well.