Common action patterns (click-outside, tooltip) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you click outside a Svelte component using a click-outside action?

Consider a Svelte component that uses a clickOutside action to close a dropdown menu when clicking outside it.

What is the expected behavior when the user clicks outside the dropdown?

Svelte

<script>
  import { clickOutside } from './actions.js';
  let open = true;
  function close() {
    open = false;
  }
</script>

<div use:clickOutside={close}>
  {#if open}
    <p>Dropdown content</p>
  {/if}
</div>

A The dropdown toggles open and closed every time you click anywhere on the page.

B The dropdown closes immediately when clicking anywhere outside the div using the action.

C The dropdown closes only when clicking inside the div, not outside.

D The dropdown stays open even when clicking outside because the action only listens inside the div.

💡 Hint

Think about what a click-outside action is designed to detect.

The clickOutside action listens for clicks outside the element it is applied to. When such a click happens, it calls the close function, which sets open to false, closing the dropdown.

📝 Syntax

intermediate

Which Svelte action syntax correctly applies a tooltip with a message?

You want to add a tooltip action that shows a message when hovering over a button.

Which syntax correctly passes the message 'Hello!' to the tooltip action?

A <button use:tooltip={'Hello!'}>Hover me</button>

B <button use:tooltip="Hello!">Hover me</button>

C <button use:tooltip(Hello!)>Hover me</button>

D <button use:tooltip={Hello!}>Hover me</button>

💡 Hint

Remember how to pass string parameters to Svelte actions.

In Svelte, to pass a string parameter to an action, you use curly braces with a string literal inside, like {'Hello!'}. Option A uses this correct syntax.

🔧 Debug

advanced

Why does this click-outside action not close the menu when clicking outside?

Examine the following Svelte action code for click-outside. Why does the menu not close when clicking outside?

Svelte

export function clickOutside(node, callback) {
  const handleClick = event => {
    if (!node.contains(event.target)) {
      callback();
    }
  };
  document.addEventListener('click', handleClick);
  return {
    destroy() {
      document.removeEventListener('click', handleClick);
    }
  };
}

<script>
  import { clickOutside } from './actions.js';
  let open = true;
  function close() {
    open = false;
  }
</script>

<div use:clickOutside={close}>
  {#if open}
    <p>Menu content</p>
  {/if}
</div>

A The callback is called but the component does not update because the callback is not reactive.

B The event listener is never added because the action is missing the 'node' parameter.

C The callback is never called because the event listener is attached to the wrong element.

D The callback is called but the menu stays open because the 'open' variable is not updated inside the callback.

💡 Hint

Consider how Svelte reactivity works with functions called outside component scope.

The callback close sets open = false, but since it is called from outside Svelte's reactive context, the component does not update. To fix this, the callback should be wrapped in a Svelte reactive statement or use a store.

❓ state_output

advanced

What is the tooltip text shown after hovering over the button twice?

Given this Svelte component with a tooltip action that changes text on hover, what tooltip text is shown after the second hover?

Svelte

<script>
  import { tooltip } from './actions.js';
  let message = 'First';
  function update() {
    message = 'Second';
  }
</script>

<button use:tooltip={message} on:mouseenter={update}>Hover me</button>

A The tooltip shows 'First' on the first hover and 'Second' on the second hover.

B The tooltip shows 'Second' on both hovers.

C The tooltip shows 'First' on both hovers.

D The tooltip shows 'Second' on the first hover and 'First' on the second hover.

💡 Hint

Think about when the action receives updated parameters.

The tooltip action receives the initial message value 'First' when the component mounts. Changing message later does not update the action unless the action handles parameter updates explicitly. So the tooltip stays 'First'.

🧠 Conceptual

expert

Why is it important to remove event listeners in Svelte actions like click-outside?

In a Svelte action that adds a global click event listener to detect clicks outside an element, why must you remove the listener when the element is destroyed?

A Because event listeners cannot be removed once added, so this is a trick question.

B Because Svelte automatically removes all event listeners, so manual removal is redundant.

C To make the action run faster by disabling the listener temporarily.

D To prevent memory leaks and avoid multiple listeners stacking up causing unexpected behavior.

💡 Hint

Think about what happens if event listeners accumulate over time.

If event listeners are not removed when the element is destroyed, they remain active and consume memory. This can cause memory leaks and multiple listeners firing unexpectedly, leading to bugs and performance issues.