question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Editable should have validation possibilities

See original GitHub issue

Feature request

We need our text to be required, right now there is no clear and concise way to validate and stop the user from submitting bad data. If you catch the bad data in onSubmit there is no way to cancel (reset editable state).

Is your feature request related to a problem? Please describe.

<Editable
   defaultValue={defaultValue}
   onSubmit={(e) => {
       if(someValidation(e)){
        //I need to cancel out and reset to previous state.
        //Im outside of EditableContext so i cant use useEditableState to call onCancel
       }
    }}
>...

Describe the solution you’d like

Provide the onCancel func to onSubmit as second param, similar to how formik provides you with “formikHelpers” to control the form behavior in different callbacks.

Describe alternatives you’ve considered

  1. preferred, easy to implement - Provide internal editable state or just the onCancel into onSubmit.

  2. Wrap controller in a <form> and use form events.

Additional context

relevant code onSubmitProp?.(value)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
Psvenssocommented, Oct 9, 2020

On second thought, current code also resets the internal state before the user could cancel out of the new value as proposed above. So this would not really work. I guess sending in a validate function prop would be easier and call that before updating the internal state would be the quickest way to allow validation on this.

Edit: I can whip up a PR but just wanted to sanity check it first if this is something we even want in there.

Something like this

export interface UseEditableProps {
  ...
  /**
   * Gets called before updating internal state and calling the onSubmit callback.
   * Is provides the next value and the onCancel method.
   */
  validate?: (
    nextValue: string,
    onCancel: (previousValue: string) => void,
  ) => boolean
}
const onSubmit = React.useCallback(() => {
    if (onValidateProp?.(value, onCancel) === false) {
      return
    }
    setIsEditing(false)
    setPrevValue(value)
    onSubmitProp?.(value)
  }, [value, onSubmitProp])
0reactions
mwhitlawcommented, Dec 19, 2022

The feature request is definitely a good idea, but it appears to have been closed/ignored. Is there a way to revive this request?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Validation rule, if the field is blank can be editable
1 Answer 1 · I try it, but somehow I still can edit the field when there is already a value. – Livia...
Read more >
Validating Input | Web Accessibility Initiative (WAI)
Validation should aim to be as accommodating as possible of different forms of input for particular data types. For example, telephone numbers are...
Read more >
More on data validation
To find the cells on the worksheet that have data validation, on the Home tab, in the Editing group, click Find & Select,...
Read more >
Client-side form validation - Learn web development | MDN
This validation is completely customizable, but you need to create it all ... There are many more possibilities that we don't cover here....
Read more >
Prevent Editing based on role and opportunity stage
Basically you will need to assign a "closed" record type for your ... this will only affect Opportunities edited after the Validation and ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found