Directory

RichText doesn't allow typing if these is a placeholder present. · Issue #59192 · WordPress/gutenberg · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RichText doesn't allow typing if these is a placeholder present. #59192

Closed
Mgrmjp opened this issue Feb 20, 2024 · 3 comments · Fixed by #59473
Closed

RichText doesn't allow typing if these is a placeholder present. #59192

Mgrmjp opened this issue Feb 20, 2024 · 3 comments · Fixed by #59473
Assignees
@ellatrix
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@Mgrmjp
Copy link

Mgrmjp commented Feb 20, 2024

Description

In a custom Gutenberg blog importing RichText and using it doesn't allow for typing at all. The cursor blinks and onChange always returns empty. On PlainText no issues.

Step-by-step reproduction instructions

Use RichText in a block:

                        el(RichText, {
                            tagName: "span",
                            className: "name",
                            // style: { display: 'flex' },
                            value: attributes.name || '',
                            onChange: value => {
                                setAttributes({ name: value })
                            },
                            placeholder: __('Nimi', 'ID'),
                        }),

Set a placeholder.

Render block on editor

Click on the text that has placeholder present.

Try to write.

Doesn't do anything.

Could be something in the older style of blocks, but can't really change everything in an older theme.

Screenshots, screen recording, code snippet

richtext

Environment info

Problem on Chrome at least.

WordPress 6.4.3

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@Mgrmjp Mgrmjp added the [Type] Bug An existing feature does not function as intended label Feb 20, 2024
@Mamaduka Mamaduka added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Needs Testing Needs further testing to be confirmed. labels Feb 20, 2024
@t-hamano
Copy link
Contributor

Hi @Mgrmjp,

Does the problem occur even if you change to the default theme and disable all plugins? I have tried code like below and it seems to work correctly.

wp.blocks.registerBlockType( 'test/test', {
	title: 'Test',
	attributes: {
		name: {
			type: 'string',
		},
	},
	edit: ( { attributes, setAttributes } ) => {
		return wp.element.createElement( wp.blockEditor.RichText, {
			tagName: 'span',
			className: 'name',
			value: attributes.value || '',
			onChange: value => {
				setAttributes( { name: name } );
			},
			placeholder: 'Nimi',
		} );
	},
} );
86620d4e21d1677b77dade50dc880555.mp4

@t-hamano t-hamano added [Status] Needs More Info Follow-up required in order to be actionable. and removed [Type] Bug An existing feature does not function as intended Needs Testing Needs further testing to be confirmed. labels Feb 20, 2024
@jordesign jordesign added the [Type] Bug An existing feature does not function as intended label Feb 21, 2024
@fabiankaegy
Copy link
Member

Hey all 👋

I am also running into this constantly and did a little more digging. Turns iut the issue happens whenever the RichText element has display: flex; applied via styling.

When flex styling is applied the placeholder text which is a span still exists. But the contenteditable element has no size. So it is not clickable.

@ellatrix would love to gain your insights where whether you've encountered this before.

@fabiankaegy fabiankaegy removed the [Status] Needs More Info Follow-up required in order to be actionable. label Feb 28, 2024
@ellatrix ellatrix mentioned this issue Feb 29, 2024
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Feb 29, 2024
@ellatrix
Copy link
Member

Fixed in #59473

@ellatrix ellatrix mentioned this issue Feb 29, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ellatrix ellatrix

Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Rich text: fix typing into empty flex element WordPress/gutenberg
6 participants
@Mamaduka @jordesign @ellatrix @fabiankaegy @Mgrmjp @t-hamano