Automattic / Automattic/jetpack

OpenTable block: Styling issues with input in block placeholder

Open
#34,607 3 comments 0 reactions 0 assignees View on GitHub
[Block] OpenTable [Platform] Atomic [Platform] Simple [Plugin] Jetpack [Pri] Low Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

The OpenTable block has a few styling issues that could be improved related to the `FormTokenField` input.

- The input has a different height to the neighboring button
- The input changes width when typing, resulting in the Embed button moving left and right. This isn't great as it means the button is a moving target, and the block is more susceptible to bugs if the underlying implementation of `FormTokenField` changes. (for example, if the suggestion list stays open, but closes on blur, the user then has to click 'Embed' twice)

### Steps to reproduce

1. Add an OpenTable block
2. Observe the issue with the input height
3. Start typing in the field
4. Observe the width of the input changes

### A clear and concise description of what you expected to happen.

The input should have the correct height and a stable width that doesn't change when the suggestions dropdown opens.

### What actually happened

The input has the wrong height and the width of the input changes when typing.

### Impact

Some (< 50%)

### Available workarounds?

There is no user impact

### Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

### Logs or notes

https://github.com/Automattic/jetpack/assets/677833/8991a562-3f33-4c9c-ab26-068fec857943

Contributor guide

Open the contributing guide

Research direction

No file or test is named. Reproduce the OpenTable block issue by checking the FormTokenField input height and typing behavior, then locate the block implementation and its existing tests if available; done means the input matches the neighboring button height and its width remains stable while typing and showing suggestions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.