feat(editable): add editable textarea element #4443

heozeop · 2021-07-23T14:29:34Z

Editable textarea element to handle multi-line input within editable context.

Closes #1622

📝 Description

Add EditableTextare element to handle multiline input with editable context

🚀 New behavior

new line input is possible with editable context.

📝 Additional Information

Use union type for inputRef

// editable/src/use-editable.ts
...
const [value, setValue] = useControllableState({
  defaultValue: defaultValue || "",
  value: valueProp,
  onChange: onChangeProp,
})
...
const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)

Because the editable context has one controllable state as default,
use union type for input to maintain compatibility with the above condition.

split test suite for editable textarea

Despite of the similarity of editable.test.tsx and editableTextarea.test.tsx, which is the test file in editable pakage,
I choose to split test suite to minimize lines of suite.

changeset-bot · 2021-07-23T14:29:38Z

🦋 Changeset detected

Latest commit: 230a9c3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@chakra-ui/anatomy	Minor
@chakra-ui/editable	Minor
@chakra-ui/theme	Minor
@chakra-ui/react	Patch
@chakra-ui/toast	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/test-utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2021-07-23T14:29:39Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/HdExSTCaswsUev2gWd2wCyoat2XJ
✅ Preview: https://chakra-ui-storybook-git-fork-heozeop-feat-edit-41088e-chakra-ui.vercel.app

codesandbox-ci · 2021-07-23T14:51:25Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 230a9c3:

Sandbox	Source
create-react-app-ts	Configuration

smkhalsa · 2021-08-02T07:57:56Z

This is a feature that we'd like to use. Is there anything holding this up?

takethefake

Hej @heozeop thanks for your Contribution.

Your code looks good to me in general, but it feels like we're mixing things up in this by making use-editable work with HTMLInputElement and HTMLTextAreaElement i would rather make use-editable generic and as well split up editable into two components editable-input and editable-textarea which use the generic version of use-editable with their respective Element-Type.

Splitting this component into two would also clarify the props in the documentation since the Textarea-props aren't displayed their although they could be used like this.

This is just my opinion, before doing any refactoring I would wait for one of the core members of the chakra team to give some input. @segunadebayo @with-heart @TimKolberger

packages/editable/src/use-editable.ts

cpvalente · 2021-11-14T16:15:30Z

I was wondering if there is a timeline for reviewing the PR with the new changes? It would be fantastic to be able to use this

mSigson · 2022-01-12T23:07:17Z

Hoping this feature will be merged and deployed soon - I would have immediate use for this on a current project for a client.

Thank you @heozeop and @takethefake for your time and efforts put towards implementing this change!

packages/editable/src/editable.tsx

heozeop · 2022-02-03T21:56:16Z

@takethefake @with-heart @TimKolberger
Hi! guys!

I just resolved the error which is occurred during build/lint/test.

It would be great if you leave some comments or merge the feature!

Thanks!

Context

FYI

PropGetterV2 : util type defined on @chakra-ui/react-utils, which omit height, color and width from merged props.

Issue: attribute 'height' incompatible

While build/lint/test, github action throw the error below (error page).

Type of height attribute of html element is incompatible with chakra's height

Try: update type of editable input/textarea props

I thought that returns of 'editable hook' should focus on functionality of editable(well, there is htmlProps which is the result of rest operation, but, anyway.).

So, I updated 'editable input and textarea props type' to PropGetterV2 from PropGetter to resolve incompatibility of style property, especially height

I want your opinion about using `PropGetterV2`

Should we support height of html attributes on editable input/textarea props explicitly?

What do you think?

heozeop · 2022-02-04T12:46:08Z

situation

I started working on this PR about a year ago.
With cli update, conflict occurred. So I merge main branch to resolve that.
Due to error on main branch (like storybook button error), yarn lint always failed.
So I decided to revert merge commit and force push.
Conflict is the result of dumb decision.

Please share your opinion

I think I have two options.

fix all errors on main branch.
- storybook: button, simple-grid
- test: system
create new pr with same content from new branch that start from current main branch.

@takethefake @TimKolberger @with-heart
What do you think about above options? Are there better options to solve this problem?

Thanks!

TimKolberger · 2022-02-05T12:06:09Z

The lint errors on main are fixed for now 🎉
I feel you - long running feature branches are a pain to work with.

My personal preference is to rebase feature branches onto main to prevent big merge commits.
This can be a pain as well if there are many merge conflicts and commits.

This PR adds a great feature which I'd love to merge when it's ready.

heozeop · 2022-02-05T13:15:11Z

Thank you very much @TimKolberger!

Thanks for your comment and commit, I'm really relieved.

As you recommended, I rebased this branch onto chakra-ui:main.

Thank you again!

awartoft · 2022-02-17T02:31:13Z

Any chance we might see this merged soon?

heozeop · 2022-02-17T02:58:44Z

Hello! @TimKolberger @with-heart! Can you merge this PR or review the change?

TimKolberger

The code looks good! I added a comment regarding the theme styles, my apologies to not catching this earlier.

packages/editable/src/editable.tsx

heozeop · 2022-02-28T13:34:17Z

Hello! @TimKolberger
I thought that there are some wrong codes on main branch! (fail test on switch, use-breakpoint-value)
Should I have to wait until fix commit about them?
Sorry for bothering.

TimKolberger · 2022-02-28T14:34:09Z

No worries 😊
Have you tried building the repository before running the tests? The main branch just ran successfully on my machine with yarn && yarn build && yarn test

To maintain consistency of editable context, use union type of textarea and input element to reference element.

To simplify usage and the type safety, add types where it declared.

The 'height' attribute type that html elemenet delivered is not compatable with 'height' of chakra. So, use PropGetterV2 to resolve style incompatiblity.

TimKolberger · 2022-02-28T22:30:39Z

Hey @heozeop!

I really appreciate the work you put into this 💖

Needless to say that this PR was open for far too long 😪

Kindly allow me to bring this over the finish line:

Added the textarea element to the anatomy package to allow theme styles to be added
Reused the input styles in the theme for the textarea component, which seems like a good starting point for further customization
Updated the changelog to address the target the users of Chakra UI, not the maintainers/contributors
and rebased onto the main branch

@all-contributors add @heozeop for code

allcontributors · 2022-02-28T22:30:51Z

@TimKolberger

I've put up a pull request to add @heozeop! 🎉

kk21 · 2022-03-02T02:40:18Z

I am not sure if something changed for using controlled value (React useState) of Editable for normal Input field.

<Editable value={name} onChange={(value) => setName(value)}>

Now setting a new value in useEffect doesnt seem to propagate into the "inner" value of Editable.
Pressing "Esc" key in edit mode after making some temporary edit will also change the value when it shld not.

TimKolberger · 2022-03-02T06:28:01Z

Hi @kk21,

Kindly open an issue with a reproduction in CodeSandbox. It is hard to verify an issue without actual code.

I don't see any changes regarding the value handling in this PR, it is still using the useControllableState hook - a reproduction would help a lot.

kk21 · 2022-03-02T08:29:18Z

Opened an issue here
#5670

vercel bot deployed to Preview July 23, 2021 14:29 View deployment

vercel bot deployed to Preview July 24, 2021 04:39 View deployment

takethefake suggested changes Aug 5, 2021

View reviewed changes

packages/editable/src/use-editable.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview – chakra-ui-storybook September 7, 2021 09:57 View deployment

vercel bot deployed to Preview – chakra-ui September 7, 2021 09:57 View deployment

vercel bot deployed to Preview December 19, 2021 06:06 View deployment

anubra266 requested review from takethefake, TimKolberger and with-heart January 13, 2022 15:09

heozeop mentioned this pull request Jan 14, 2022

Request to add EditableTextArea to [Editable] component #1622

Closed

TimKolberger reviewed Jan 14, 2022

View reviewed changes

packages/editable/src/editable.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview January 21, 2022 03:21 View deployment

TimKolberger approved these changes Feb 3, 2022

View reviewed changes

vercel bot deployed to Preview February 3, 2022 21:47 View deployment

heozeop requested a review from TimKolberger February 3, 2022 21:59

vercel bot deployed to Preview February 3, 2022 22:58 View deployment

vercel bot had a problem deploying to Preview February 4, 2022 12:12 Failure

vercel bot deployed to Preview February 5, 2022 12:58 View deployment

vercel bot deployed to Preview February 5, 2022 13:03 View deployment

TimKolberger suggested changes Feb 17, 2022

View reviewed changes

packages/editable/src/editable.tsx Outdated Show resolved Hide resolved

halsk mentioned this pull request Feb 21, 2022

[Story] Use textarea for some properties of the Project codeforjapan/hackdays#53

Open

1 task

vercel bot deployed to Preview February 23, 2022 13:01 View deployment

vercel bot deployed to Preview February 23, 2022 23:48 View deployment

heozeop and others added 9 commits February 28, 2022 22:49

feat(editable): add editable textarea element

25ffd31

To maintain consistency of editable context, use union type of textarea and input element to reference element.

refactor(editable): change target element type

868ae21

refactor(editable): add types on propgetter

188d980

To simplify usage and the type safety, add types where it declared.

fix(editable): use prop getter v2

2d5947b

The 'height' attribute type that html elemenet delivered is not compatable with 'height' of chakra. So, use PropGetterV2 to resolve style incompatiblity.

fix(editable): use hook for styling textarea

bc33a69

fix(editable): add missing property referencing on styling

94fb504

feat: add textarea to editableAnatomy

47493c7

feat: add default styles for EditableTextarea

12f867e

chore: update changeset

230a9c3

vercel bot deployed to Preview February 28, 2022 22:30 View deployment

allcontributors bot mentioned this pull request Feb 28, 2022

docs: add heozeop as a contributor for code #5667

Merged

TimKolberger approved these changes Feb 28, 2022

View reviewed changes

TimKolberger merged commit fbe9462 into chakra-ui:main Feb 28, 2022

github-actions bot mentioned this pull request Feb 28, 2022

Version Packages #5655

Merged

Uh oh!

feat(editable): add editable textarea element #4443

feat(editable): add editable textarea element #4443

Uh oh!

Conversation

heozeop commented Jul 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

🚀 New behavior

📝 Additional Information

Use union type for inputRef

split test suite for editable textarea

Uh oh!

changeset-bot bot commented Jul 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Jul 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Jul 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

smkhalsa commented Aug 2, 2021

Uh oh!

takethefake left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cpvalente commented Nov 14, 2021

Uh oh!

mSigson commented Jan 12, 2022

Uh oh!

Uh oh!

heozeop commented Feb 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

FYI

Issue: attribute 'height' incompatible

Try: update type of editable input/textarea props

I want your opinion about using PropGetterV2

Uh oh!

heozeop commented Feb 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

situation

Please share your opinion

Uh oh!

TimKolberger commented Feb 5, 2022

Uh oh!

heozeop commented Feb 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

awartoft commented Feb 17, 2022

Uh oh!

heozeop commented Feb 17, 2022

Uh oh!

TimKolberger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

heozeop commented Feb 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TimKolberger commented Feb 28, 2022

Uh oh!

TimKolberger commented Feb 28, 2022

Uh oh!

allcontributors bot commented Feb 28, 2022

Uh oh!

kk21 commented Mar 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TimKolberger commented Mar 2, 2022

Uh oh!

kk21 commented Mar 2, 2022

Uh oh!

Uh oh!

heozeop commented Jul 23, 2021 •

edited

Loading

changeset-bot bot commented Jul 23, 2021 •

edited

Loading

vercel bot commented Jul 23, 2021 •

edited

Loading

codesandbox-ci bot commented Jul 23, 2021 •

edited

Loading

takethefake left a comment •

edited

Loading

heozeop commented Feb 3, 2022 •

edited

Loading

I want your opinion about using `PropGetterV2`

heozeop commented Feb 4, 2022 •

edited

Loading

heozeop commented Feb 5, 2022 •

edited

Loading

heozeop commented Feb 28, 2022 •

edited

Loading

kk21 commented Mar 2, 2022 •

edited

Loading