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.

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

Placeholder is not updating #340

Closed
dbabaioff opened this issue Mar 11, 2018 · 4 comments
Closed

Placeholder is not updating #340

dbabaioff opened this issue Mar 11, 2018 · 4 comments

Comments

@dbabaioff
Copy link

dbabaioff commented Mar 11, 2018

If I try to re-render my component with a different placeholder - the placeholder is not changing.

Looking into: react-quill/lib/component.js
The placeholder is not on dirtyProps list

See example:
https://codepen.io/dbabaioff/pen/pLJyLq

React-Quill version
[*] 1.2.0

@alexkrolick
Copy link
Collaborator

Care to PR in a fix?

@RafikiTiki
Copy link

RafikiTiki commented Mar 26, 2018

If you put placeholder in dirtyProps Quill will reinstantiate on every placeholder change which probably is not very optimal. There isn't any API in Quill itself to change placeholder and as stated in this comment from Quill contributor owner, we should use dataset to change placeholder. Way to do it:

  1. You need to set up refs as described here -> example
  2. After you have refs set up use this code in any place you want to update placeholder (react lifecycle or whatever):this.quillRef.root.dataset.placeholder = 'Placeholder text'

@alexkrolick
Copy link
Collaborator

Ok, let's defer to the Quill recommendation for handling placeholder. I'll add a note to the README.

blerner pushed a commit to CodeGrade/hourglass that referenced this issue May 31, 2021
…er` as a prop if we want it to dynamically update. Using a random number as a key was a _bad_ idea, since it destroyed focus and history for the quill editors every time it changed. (Punching through to the dataset of the root element seems dirty, but it appears to be the suggested way to do this, per the Quill authors.)
blerner pushed a commit to CodeGrade/hourglass that referenced this issue Sep 2, 2021
…er` as a prop if we want it to dynamically update. Using a random number as a key was a _bad_ idea, since it destroyed focus and history for the quill editors every time it changed. (Punching through to the dataset of the root element seems dirty, but it appears to be the suggested way to do this, per the Quill authors.)
@alkismavridis
Copy link

alkismavridis commented Jul 4, 2022

I know this issue is closed since a long time, but I would expect that this should be an internal responsibility of react-quill instead of forwarding this responsibility to the users. You could make the placeholder prop really work by doing something like that on your side:

useEffect(() => {
    ref.current.getEditor().root.dataset.placeholder = props.placeholder || "";
  }, [ref, props.placeholder]);

With the current implementation, your users are responsible for doing this themselves, and the nature of the placeholder prop is confusing. Renaming it to initialPlaceholder (or actually fixing it) would be much better IMO.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants