From 50320f7cb16654bc37338e93edf4fa3bb1a607e7 Mon Sep 17 00:00:00 2001 From: Dave <69651599+D4ve-R@users.noreply.github.com> Date: Fri, 22 Nov 2024 14:29:26 +0100 Subject: [PATCH 1/9] add disabled attribute handling to link --- packages/vue3/src/link.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/vue3/src/link.ts b/packages/vue3/src/link.ts index 49e5720bc..05ccdd5bb 100755 --- a/packages/vue3/src/link.ts +++ b/packages/vue3/src/link.ts @@ -36,6 +36,7 @@ export interface InertiaLinkProps { async?: boolean prefetch?: boolean | LinkPrefetchOption | LinkPrefetchOption[] cacheFor?: CacheForOption | CacheForOption[] + disabled?: boolean } type InertiaLink = DefineComponent @@ -132,6 +133,10 @@ const Link: InertiaLink = defineComponent({ type: Function as PropType<(cancelToken: import('axios').CancelTokenSource) => void>, default: () => {}, }, + disabled: { + type: Boolean, + default: false, + }, }, setup(props, { slots, attrs }) { const inFlightCount = ref(0) @@ -224,6 +229,7 @@ const Link: InertiaLink = defineComponent({ const regularEvents = { onClick: (event) => { + if (props.disabled) return; if (shouldIntercept(event)) { event.preventDefault() router.visit(href, visitParams) @@ -233,11 +239,13 @@ const Link: InertiaLink = defineComponent({ const prefetchHoverEvents = { onMouseenter: () => { + if (props.disabled) return; hoverTimeout.value = setTimeout(() => { prefetch() }, 75) }, onMouseleave: () => { + if (props.disabled) return; clearTimeout(hoverTimeout.value) }, onClick: regularEvents.onClick, @@ -245,12 +253,14 @@ const Link: InertiaLink = defineComponent({ const prefetchClickEvents = { onMousedown: (event) => { + if (props.disabled) return; if (shouldIntercept(event)) { event.preventDefault() prefetch() } }, onMouseup: (event) => { + if (props.disabled) return; event.preventDefault() router.visit(href, visitParams) }, From be592abc0af68a4d34963d86d5f53ea4cb8d8d2b Mon Sep 17 00:00:00 2001 From: Dave <69651599+D4ve-R@users.noreply.github.com> Date: Fri, 22 Nov 2024 14:54:11 +0100 Subject: [PATCH 2/9] update disabled handling --- packages/vue3/src/link.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/vue3/src/link.ts b/packages/vue3/src/link.ts index 05ccdd5bb..e5b7310fd 100755 --- a/packages/vue3/src/link.ts +++ b/packages/vue3/src/link.ts @@ -224,28 +224,29 @@ const Link: InertiaLink = defineComponent({ } const prefetch = () => { - router.prefetch(href, baseParams, { cacheFor: cacheForValue }) + if (!props.disabled) { + router.prefetch(href, baseParams, { cacheFor: cacheForValue }) + } } const regularEvents = { onClick: (event) => { - if (props.disabled) return; if (shouldIntercept(event)) { event.preventDefault() - router.visit(href, visitParams) + if (!props.disabled) { + router.visit(href, visitParams) + } } }, } const prefetchHoverEvents = { onMouseenter: () => { - if (props.disabled) return; hoverTimeout.value = setTimeout(() => { prefetch() }, 75) }, onMouseleave: () => { - if (props.disabled) return; clearTimeout(hoverTimeout.value) }, onClick: regularEvents.onClick, @@ -253,16 +254,16 @@ const Link: InertiaLink = defineComponent({ const prefetchClickEvents = { onMousedown: (event) => { - if (props.disabled) return; if (shouldIntercept(event)) { event.preventDefault() prefetch() } }, onMouseup: (event) => { - if (props.disabled) return; event.preventDefault() - router.visit(href, visitParams) + if (!props.disabled) { + router.visit(href, visitParams) + } }, onClick: (event) => { if (shouldIntercept(event)) { From efd4f9581bb8fd67ab41aeb2653723bde592f1e3 Mon Sep 17 00:00:00 2001 From: Dave <69651599+D4ve-R@users.noreply.github.com> Date: Fri, 22 Nov 2024 15:39:31 +0100 Subject: [PATCH 3/9] add disabled to elProps['button'] --- packages/vue3/src/link.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue3/src/link.ts b/packages/vue3/src/link.ts index e5b7310fd..0edc62c36 100755 --- a/packages/vue3/src/link.ts +++ b/packages/vue3/src/link.ts @@ -190,7 +190,7 @@ const Link: InertiaLink = defineComponent({ const elProps = { a: { href }, - button: { type: 'button' }, + button: { type: 'button', disabled: props.disabled }, } const baseParams = { From 93d17bbdb81d41aca0f62bb17d844cedb0866d8e Mon Sep 17 00:00:00 2001 From: Dave <69651599+D4ve-R@users.noreply.github.com> Date: Fri, 22 Nov 2024 15:55:41 +0100 Subject: [PATCH 4/9] add tests --- .../vue3/test-app/Pages/Links/Disabled.vue | 19 +++++ tests/app/server.js | 2 + tests/links.spec.ts | 74 +++++++++++++++++++ 3 files changed, 95 insertions(+) create mode 100644 packages/vue3/test-app/Pages/Links/Disabled.vue diff --git a/packages/vue3/test-app/Pages/Links/Disabled.vue b/packages/vue3/test-app/Pages/Links/Disabled.vue new file mode 100644 index 000000000..aabd47772 --- /dev/null +++ b/packages/vue3/test-app/Pages/Links/Disabled.vue @@ -0,0 +1,19 @@ + + + diff --git a/tests/app/server.js b/tests/app/server.js index 213ccca6c..fdb23a479 100644 --- a/tests/app/server.js +++ b/tests/app/server.js @@ -73,6 +73,8 @@ app.get('/links/headers/version', (req, res) => ) app.get('/links/data-loading', (req, res) => inertia.render(req, res, { component: 'Links/DataLoading' })) +app.get('/links/disabled', (req, res) => inertia.render(req, res, { component: 'Links/Disabled' })) + app.get('/visits/partial-reloads', (req, res) => inertia.render(req, res, { component: 'Visits/PartialReloads', diff --git a/tests/links.spec.ts b/tests/links.spec.ts index a45217788..6eeb5b40c 100644 --- a/tests/links.spec.ts +++ b/tests/links.spec.ts @@ -754,3 +754,77 @@ test.describe('data-loading attribute', () => { await expect(link2).not.toHaveAttribute('data-loading') }) }) + +test.describe('disabled attribute', () => { + test('disables the link when the disabled attribute is set to true', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Disabled' }) + await expect(link).toBeDisabled() + await expect(link).not.toHaveAttribute('disabled') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) + + test('disables the link when the disabled attribute exists', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Disabled Default' }) + await expect(link).toBeDisabled() + await expect(link).not.toHaveAttribute('disabled') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) + + test('does not disable the link when the disabled attribute is set to false', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Enabled' }) + await expect(link).not.toBeDisabled() + await expect(link).not.toHaveAttribute('disabled') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) + + test('does not disable the link when the disabled attribute not exists', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Enabled Default' }) + await expect(link).not.toBeDisabled() + await expect(link).not.toHaveAttribute('disabled') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) + + test('disables the link (as=button) when the disabled attribute is set to true', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Disabled Button' }) + await expect(link).toBeDisabled() + await expect(link).toHaveAttribute('disabled') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) + + test('disables the link (as=button) when the disabled attribute is set', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Disabled Default Button' }) + await expect(link).toBeDisabled() + await expect(link).toHaveAttribute('disabled') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) + + test('does not disable the link (as=button) when the disabled attribute is set to false', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Enabled Button' }) + await expect(link).not.toBeDisabled() + await expect(link).toHaveAttribute('disabled', 'false') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) + + test('does not disable the link (as=button) when the disabled attribute is not set', async ({ page }) => { + await page.goto('/links/disabled') + const link = await page.getByRole('link', { name: 'Enabled Default Button' }) + await expect(link).not.toBeDisabled() + await expect(link).not.toHaveAttribute('disabled') + await link.click() + await expect(page).toHaveURL('/links/disabled') + }) +}) From d6bfecbab5812e9394bfd1799b08f1a2319921ee Mon Sep 17 00:00:00 2001 From: Dave <69651599+D4ve-R@users.noreply.github.com> Date: Fri, 22 Nov 2024 16:05:28 +0100 Subject: [PATCH 5/9] fix tests --- tests/links.spec.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/links.spec.ts b/tests/links.spec.ts index 6eeb5b40c..adc15fee4 100644 --- a/tests/links.spec.ts +++ b/tests/links.spec.ts @@ -758,7 +758,7 @@ test.describe('data-loading attribute', () => { test.describe('disabled attribute', () => { test('disables the link when the disabled attribute is set to true', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Disabled' }) + const link = await page.getByRole('link', { name: 'Disabled', exact: true }) await expect(link).toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() @@ -767,7 +767,7 @@ test.describe('disabled attribute', () => { test('disables the link when the disabled attribute exists', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Disabled Default' }) + const link = await page.getByRole('link', { name: 'Disabled Default', exact: true }) await expect(link).toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() @@ -776,7 +776,7 @@ test.describe('disabled attribute', () => { test('does not disable the link when the disabled attribute is set to false', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Enabled' }) + const link = await page.getByRole('link', { name: 'Enabled', exact: true }) await expect(link).not.toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() @@ -785,7 +785,7 @@ test.describe('disabled attribute', () => { test('does not disable the link when the disabled attribute not exists', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Enabled Default' }) + const link = await page.getByRole('link', { name: 'Enabled Default', exact: true }) await expect(link).not.toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() @@ -794,7 +794,7 @@ test.describe('disabled attribute', () => { test('disables the link (as=button) when the disabled attribute is set to true', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Disabled Button' }) + const link = await page.getByRole('link', { name: 'Disabled Button', exact: true }) await expect(link).toBeDisabled() await expect(link).toHaveAttribute('disabled') await link.click() @@ -803,7 +803,7 @@ test.describe('disabled attribute', () => { test('disables the link (as=button) when the disabled attribute is set', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Disabled Default Button' }) + const link = await page.getByRole('link', { name: 'Disabled Default Button', exact: true }) await expect(link).toBeDisabled() await expect(link).toHaveAttribute('disabled') await link.click() @@ -812,7 +812,7 @@ test.describe('disabled attribute', () => { test('does not disable the link (as=button) when the disabled attribute is set to false', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Enabled Button' }) + const link = await page.getByRole('link', { name: 'Enabled Button', exact: true }) await expect(link).not.toBeDisabled() await expect(link).toHaveAttribute('disabled', 'false') await link.click() @@ -821,7 +821,7 @@ test.describe('disabled attribute', () => { test('does not disable the link (as=button) when the disabled attribute is not set', async ({ page }) => { await page.goto('/links/disabled') - const link = await page.getByRole('link', { name: 'Enabled Default Button' }) + const link = await page.getByRole('link', { name: 'Enabled Default Button', exact: true }) await expect(link).not.toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() From ad9fad389f37ec09aa69a5dd9af0fcd254db6cf4 Mon Sep 17 00:00:00 2001 From: Dave <69651599+D4ve-R@users.noreply.github.com> Date: Fri, 22 Nov 2024 16:25:13 +0100 Subject: [PATCH 6/9] fix tests for --- tests/links.spec.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/tests/links.spec.ts b/tests/links.spec.ts index adc15fee4..94498b2b7 100644 --- a/tests/links.spec.ts +++ b/tests/links.spec.ts @@ -759,7 +759,6 @@ test.describe('disabled attribute', () => { test('disables the link when the disabled attribute is set to true', async ({ page }) => { await page.goto('/links/disabled') const link = await page.getByRole('link', { name: 'Disabled', exact: true }) - await expect(link).toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() await expect(page).toHaveURL('/links/disabled') @@ -768,7 +767,6 @@ test.describe('disabled attribute', () => { test('disables the link when the disabled attribute exists', async ({ page }) => { await page.goto('/links/disabled') const link = await page.getByRole('link', { name: 'Disabled Default', exact: true }) - await expect(link).toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() await expect(page).toHaveURL('/links/disabled') @@ -777,7 +775,6 @@ test.describe('disabled attribute', () => { test('does not disable the link when the disabled attribute is set to false', async ({ page }) => { await page.goto('/links/disabled') const link = await page.getByRole('link', { name: 'Enabled', exact: true }) - await expect(link).not.toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() await expect(page).toHaveURL('/links/disabled') @@ -786,7 +783,6 @@ test.describe('disabled attribute', () => { test('does not disable the link when the disabled attribute not exists', async ({ page }) => { await page.goto('/links/disabled') const link = await page.getByRole('link', { name: 'Enabled Default', exact: true }) - await expect(link).not.toBeDisabled() await expect(link).not.toHaveAttribute('disabled') await link.click() await expect(page).toHaveURL('/links/disabled') @@ -796,7 +792,7 @@ test.describe('disabled attribute', () => { await page.goto('/links/disabled') const link = await page.getByRole('link', { name: 'Disabled Button', exact: true }) await expect(link).toBeDisabled() - await expect(link).toHaveAttribute('disabled') + await expect(link).toHaveAttribute('disabled', 'true') await link.click() await expect(page).toHaveURL('/links/disabled') }) From 547e732476bc401082af03dae9e14d6d4914a7b0 Mon Sep 17 00:00:00 2001 From: Dave <69651599+D4ve-R@users.noreply.github.com> Date: Fri, 22 Nov 2024 16:43:53 +0100 Subject: [PATCH 7/9] fix test for