# Cypress Documentation
# Source: https://raw.githubusercontent.com/cypress-io/cypress-documentation/main/docs/api/commands/blur.mdx
# Path: docs/api/commands/blur.mdx

---
title: 'blur | Cypress Documentation'
description: Blur a focused element in Cypress.
sidebar_label: blur
---

<ProductHeading product="app" />

# blur

Blur a focused element.

It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried) to
chain further commands that rely on the subject after `.blur()`.

:::caution

This element must currently be in focus. If you want to ensure an element is
focused before blurring, try using [`.focus()`](/api/commands/focus) before
`.blur()`.

```javascript
cy.get('button').as('btn').focus()
cy.get('@btn').blur()
```

:::

## Syntax

```javascript
.blur()
.blur(options)
```

### Usage

<Icon name="check-circle" color="green" /> **Correct Usage**

```javascript
cy.get('[type="email"]').blur() // Blur email input
cy.get('[tabindex="1"]').blur() // Blur el with tabindex
```

<Icon name="exclamation-triangle" color="red" /> **Incorrect Usage**

```javascript
cy.blur('input') // Errors, cannot be chained off 'cy'
cy.window().blur() // Errors, 'window' does not yield DOM element
```

### Arguments

<Icon name="angle-right" /> **options _(Object)_**

Pass in an options object to change the default behavior of `.blur`.

| Option    | Default                                                           | Description                                                                         |
| --------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `log`     | `true`                                                            | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
| `force`   | `false`                                                           | Forces the action, disables checking if [element is focused](#Requirements)         |
| `timeout` | [`defaultCommandTimeout`](/app/references/configuration#Timeouts) | Time to wait for `.blur()` to resolve before [timing out](#Timeouts)                |

<HeaderYields />

- `.blur()` yields the same subject it was given.
- It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried)
  to chain further commands that rely on the subject after `.blur()`.

## Examples

### No Args

#### Blur the comment input

```javascript
cy.get('[name="comment"]').type('Nice Product!')
cy.get('[name="comment"]').blur()
```

### Options

#### Blur the first input

Setting `force` to `true` in the options disables checking whether the input is
focusable or currently has focus.

```javascript
cy.get('input:first').blur({ force: true })
```

## Notes

### Actionability

#### Blur is not an action command

`.blur()` is not implemented like other action commands, and does not follow the
same rules of
[waiting for actionability](/app/core-concepts/interacting-with-elements).

`.blur()` is a helpful command used as a shortcut. Normally there's no way for a
user to "blur" an element. Typically the user would have to perform **another**
action like clicking or tabbing to a different element. Needing to perform a
separate action like this is very indirect.

Therefore it's often much more efficient to test the blur behavior directly with
`.blur()`.

### Timeouts {#Notes-Timeouts}

#### `.blur()` can time out because your browser did not receive any blur events

If you see this error, you may want to ensure that the main browser window is
currently focused. This means not being focused in debugger or any other window
when the command is run.

Internally Cypress does account for this, and will polyfill the blur events when
necessary to replicate what the browser does. Unfortunately the browser will
still behave differently when not in focus - for instance it may throttle async
events. Your best bet here is to keep Cypress focused when working on a test.

## Rules

<HeaderRequirements />

- `.blur()` requires being chained off a command that yields DOMelement(s).
- `.blur()` requires the element to currently have focus.
- `.blur()` requires the element to be able to receive focus.

<HeaderAssertions />

- `.blur()` will automatically wait for assertions you have chained to pass.

<HeaderTimeouts />

- `.blur()` can time out waiting for assertions you've added to pass.

## Command Log

**_Blur a textarea after typing._**

```javascript
cy.get('[name="comment"]').focus()
cy.get('[name="comment"]').type('Nice Product!')
cy.get('[name="comment"]').blur()
```

The commands above will display in the Command Log as:

<DocsImage
  src="/img/api/blur/blur-input-command-log.png"
  alt="command log for blur"
/>

When clicking on the `blur` command within the command log, the console outputs
the following:

<DocsImage
  src="/img/api/blur/console-showing-blur-command.png"
  alt="console.log for blur"
/>

## See also

- [`.focus()`](/api/commands/focus)
- [`cy.focused()`](/api/commands/focused)