nextcloud-libraries/nextcloud-vue

NcActions open toggle flickers if devtools are opened

Opened this issue ยท 1 comments

Devtools opened Closed
Peek 08-04-2023 09-27 Peek 08-04-2023 09-28

Not sure this is really an issue, but am I the only one? ๐Ÿ˜…

Reproducible code
<template>
	<div>
		<button @click="open=open===1?2:1">Toggle</button>
		<NcActions :force-menu="true" :open="open===1">
			<NcActionButton @click="actionDelete">
				<template #icon>
					<Delete :size="20" />
				</template>
				Delete
			</NcActionButton>
		</NcActions>
		<NcActions :force-menu="true" :open="open===2">
			<NcActionButton @click="actionDelete">
				<template #icon>
					<Delete :size="20" />
				</template>
				Delete
			</NcActionButton>
		</NcActions>
	</div>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete'

export default {
	components: {
		Delete,
	},
	data() {
	  return {open:0}
	  },
	methods: {
		actionDelete() {
			alert('Delete')
		},
	},
}
</script>

Can reproduce in Firefox when not just devtools but the Elements tab is open.

It seems that the slowing part here is highlighting updates. Rendering of NcActions itself seems fast enough, ~6-10ms

image