Would you take a PR for an option that changes the cancel button to a link like in the screenshot below? If so, I forked and completed the code, just need to update the docs and I'll submit the PR.

Checkbox, select, and select with multi-select

Thanks for great addon!

Just a question, is there a way to activate edit mode by secondary element (i.e. clicking on 'edit' button or 'pencil' icon)?

Best regards.

Version: 0.2.1
Ember version: 2.13.0

I took your example from your documentation and it seems that the default behavior is to hide the ember-inline-editable component. If I go into dev tools and disable the display:none property on .is-hidden and click on the text to edit, it looks that the parent div of the input field is also defaulting to hidden. I'm not sure if this is a bug or if I'm just missing some way to override this, but I'd appreciate any input!

Thank you!

Hi there, thanks for making this wonderful addon.

Currently I am trying to make this component non-editable when certain permissions are enabled in my system. I noted in the documentation that the enabled attribute is likely the way to go for this. However when set enabled to false, it removes the existing text of the component altogether. Checking the background HTML, I note that the text is completely gone from the element. Is there any way to make the component non-editable while still displaying its text?

Please and thanks!

Currently, this component is set up to revert changes when doing focusOut while editing.

I propose adding an option for saveOnFocusOut.
When this is true then instead of canceling we then save.

The change needs to be here:
https://github.com/swastik/ember-inline-edit/blob/master/addon/components/ember-inline-edit.js#L63

This addon causes isVisible (ember >= 3.15) and tryInvoke (ember >= 3.24) deprecations .

The application I'm using ember-inline-edit works fine with the Chrome Browser on Android, but the same does not work with Chrome Browser(Or Safari) on iOS.
startEditing action is not being called on a touch action.
Is there something we'll have to add/modify in order to get it working on a browser running on iOS?
Inserting the code from the template where I'm using ember-inline-edit

{{ember-inline-edit value=<model>.<attr> onSave = (action "updateModel" <model>.id) onClose = (action "rollbackModel" <model>.id)}}

I followed the instruction in the readme but I'm having trouble saving the edited text.

In my routes/meals/show.js I have:

model(params) {
    return this.store.findRecord('meal', params.meal_id);
  },
actions: {
    changeName(val) {
      this.set('name', val);
    }
  }

but nothing happens at all. My backend doesn't get any messages. I know it's hitting the changeName function though, debugger works in it. This is in Ember 2.6 btw. Is there a step I am missing? Thanks!

Clicking on edit icon executes startEditing but right after that _handleClick catches the event and the required conditions fails hence it emits close event.

Solution is to modify startEditing method as below

-  startEditing () {
+  startEditing(event) {
      info('[ember-inline-edit] Got the `startEditing` action')
      Ember.run(this, function(){ set(this, 'isEditing', true) })
      this._focusOnInput()
+     event.stopPropagation();
    },

The following action sequence produces a state in which the control will not save properly:

1. Click on the control.
2. Change the selected option.
3. Click anywhere outside the control so that the control closes. Notice that the original value is shown.
4. Click on the control. Notice that the shown value is the modified value.
5. Press the save button. Notice that the control still shows the original value, i.e. the save button didn't work.

I haven't had time yet to isolate this but in our usage (without the edit button) e is null so this line bombs.

https://github.com/swastik/ember-inline-edit/blob/master/addon/components/ember-inline-edit.js#L93

It may well be this line (that is not propogating the event) https://github.com/swastik/ember-inline-edit/blob/master/addon/components/ember-inline-edit.js#L56

I'll try to work up a test case but dropping back to 0.1.5 resolves this for me.

Hello folks, thanks for the awesome work on this addon!

I wanted to do a rollback feature through which, any changes get undone once onClose is triggered.

 rollback(id, prop, prevContent) {
    let obj = this.get('store').peekRecord(model, id);     
    obj.set(prop, prevContent);
 },

I thought of doing something like that, but didn't quite work out. Any tips / examples?