Drag and drop feature of comment editor does not work properly when editing a comment #8670

urvashigupta7 · 2020-10-23T04:23:15Z

When a file is uploaded using drag and drop feature it gets added in different text box.

Steps to reproduce bug :

Add file in comment box using drag and drop (Don't post new comment just add the file)
Try editing any existing comment, the file will get added in wrong textbox

ghost · 2020-10-24T11:35:20Z

@cesswairimu @jywarren is this something i can take up?

cesswairimu · 2020-10-24T12:23:35Z

Hi, thanks @urvashigupta7 for opening this, I tested locally and it works fine. @karenefereyan could you please check on https://stable.publiclab.org/ could be its fixed but its not deployed yet. If you find the issue on stable you can go ahead. Thanks all

urvashigupta7 · 2020-10-24T13:19:51Z

Hi @cesswairimu. I am unable to add images while editing the comment on https://stable.publiclab.org/ . It just shows never-ending uploading

cesswairimu · 2020-10-24T15:06:41Z

Great investigation, thanks @urvashigupta7, would you like to work on this or should @karenefereyan give it a try

ghost · 2020-10-25T09:49:06Z

Great investigation, thanks @urvashigupta7, would you like to work on this or should @karenefereyan give it a try

@urvashigupta7 would you like to work on it? Thanks cess

urvashigupta7 · 2020-10-25T10:49:28Z

@karenefereyan You can try this out 😄 Thanks!!

ghost · 2020-10-25T22:58:26Z

@cesswairimu could you please assign this to me?

ghost · 2020-10-25T23:00:12Z

@karenefereyan You can try this out 😄 Thanks!!

I see that you are a competitive programmer. I have been long interested in that. Could you tell me more about it?

cesswairimu · 2020-10-26T07:38:31Z

Go ahead @karenefereyan

urvashigupta7 · 2020-10-26T12:19:53Z

@karenefereyan You can try this out smile Thanks!!

I see that you are a competitive programmer. I have been long interested in that. Could you tell me more about it?

Sure @karenefereyan . I would be happy to help. Let us just connect on twitter, we can discuss about this there.

ghost · 2020-11-11T17:59:47Z

@cesswairimu @urvashigupta7 things have been tough on my side recently. Can you help me with the solving of this issue?

ghost · 2020-11-12T01:01:12Z

@urvashigupta7 i'm unable to replicate the issue. I dragged and dropped files several times and afterward went ahead to edit comments and there are no irregularities. Or am i mistaken?

urvashigupta7 · 2020-11-12T03:47:14Z

Hi @karenefereyan. Edit comment does not work on https://stable.publiclab.org/ but I see edit comment works fine locally. But I am facing the issue I tried to show in the gif above.

ghost · 2020-11-12T07:23:42Z

Hi @karenefereyan. Edit comment does not work on https://stable.publiclab.org/ but I see edit comment works fine locally. But I am facing the issue I tried to show in the gif above.

Oh okay. Thanks so much

jywarren · 2020-12-01T17:02:08Z

Hello all, thank you for investigating and documenting this so carefully. I'm going to edit the title to add some specificity that this is during editing a comment. It may also be different depending on if the edited comment was just made (with no page refresh) or if it was there already, since newly made comments are inserted using JavaScript instead of being built-in at the time the page is prepared by Ruby.

I'm going to mark this as part of the overall Comment Editor project but whoever would like to work on it, i recommend writing a test that very specifically demonstrates this behavior, of editing a comment then drag-and-dropping an image - and to copy and adapt the test from this example:

plots2/test/system/comment_test.rb

Lines 136 to 156 in a23a3f9

    
           test 'comment image drag and drop upload' do 
        
             Capybara.ignore_hidden_elements = false 
        
             visit "/wiki/wiki-page-path/comments" 
        
             find("p", text: "Reply to this comment...").click() 
        
             reply_preview_button = page.all('#post_comment')[0] 
        
             # Upload the image 
        
             drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", ".dropzone") 
        
             # Wait for image upload to finish 
        
             wait_for_ajax 
        
             Capybara.ignore_hidden_elements = true 
        
             # Toggle preview 
        
             reply_preview_button.click() 
        
             # Make sure that image has been uploaded 
        
             page.assert_selector('#preview img', count: 1) 
        
           end

Thank you so much!

jywarren · 2020-12-01T17:02:34Z

and linking to #8775

noi5e · 2020-12-27T05:52:40Z

I'm researching this bug right now, and I can consistently reproduce it. Here are some instructions for those curious:

Steps to Reproduce Bug

Upload an image to the main comment form (at the bottom of page).
Open an edit comment form.
Upload an image to the edit comment form.
The image doesn't end up in edit form (expected behavior). Instead it ends up in the main comment form (actual behavior).

Bug Notes

This bug is present in research notes, and questions (not wikis).
This bug is also present between an edit comment form, and a 'Reply to this comment' form.
- ie. you can reproduce it if you follow the instructions above, and replace 'main comment form' with 'Reply to this comment' form.
The bug is present regardless of whether or not you upload via select, or drag-and-drop.
The bug is present only when an edit comment form is involved.
- For example, cross-wiring doesn't happen when you upload into the main comment form, then upload into a 'Reply to this comment' form.

I wrote a system test demonstrating this behavior and will open a PR for it shortly.

…tener (publiclab#8670)

* add test for comment image crosswiring * wrap everything in comment-form-wrapper, assign .selected in drop listener (#8670) * delete defunct function, fix indentation & spacing #8670 * rewrite tests that rely on comment-form-wrapper * remove deprecated code, comments; fix indent * initialize on pageload (#8670) * rewrite for multiple file inputs * change test to focus on image drag & drop #8670 * restore E.initialize call in drop #8670 * undo E.initialize call #8670 * assign unique IDs to comment form textareas #8670 * change ID selectors to class ones to match new IDs #8670 * fix indentation #8670 * change ID reference to class reference #8670 * initialize E with parameters in drop listener #8670 * update tests for new text-input selectors #8670 * change ID text-input reference to class ref #8670 * change text-input ID to class #8670 * drop: initialize E with params #8670 * remove semicolon

…ab#8897) * add test for comment image crosswiring * wrap everything in comment-form-wrapper, assign .selected in drop listener (publiclab#8670) * delete defunct function, fix indentation & spacing publiclab#8670 * rewrite tests that rely on comment-form-wrapper * remove deprecated code, comments; fix indent * initialize on pageload (publiclab#8670) * rewrite for multiple file inputs * change test to focus on image drag & drop publiclab#8670 * restore E.initialize call in drop publiclab#8670 * undo E.initialize call publiclab#8670 * assign unique IDs to comment form textareas publiclab#8670 * change ID selectors to class ones to match new IDs publiclab#8670 * fix indentation publiclab#8670 * change ID reference to class reference publiclab#8670 * initialize E with parameters in drop listener publiclab#8670 * update tests for new text-input selectors publiclab#8670 * change ID text-input reference to class ref publiclab#8670 * change text-input ID to class publiclab#8670 * drop: initialize E with params publiclab#8670 * remove semicolon

urvashigupta7 added the bug the issue is regarding one of our programs which faces problems when a certain task is executed label Oct 23, 2020

cesswairimu assigned ghost Oct 26, 2020

jywarren added this to the Comment editor milestone Dec 1, 2020

jywarren added the help wanted requires help by anyone willing to contribute label Dec 1, 2020

jywarren changed the title ~~Drag and drop feature of comment editor does not work properly~~ Drag and drop feature of comment editor does not work properly when editing a comment Dec 1, 2020

jywarren mentioned this issue Dec 1, 2020

OLD CLOSED Comment Editor Overhaul Issue #8775

Closed

noi5e mentioned this issue Dec 27, 2020

Fix Image Drag & Drop Cross-Wiring in Edit Comment Form #8897

Merged

ghost removed their assignment Dec 27, 2020

noi5e added a commit to noi5e/plots2 that referenced this issue Dec 29, 2020

wrap everything in comment-form-wrapper, assign .selected in drop lis…

f34bc6b

…tener (publiclab#8670)

noi5e added a commit to noi5e/plots2 that referenced this issue Dec 29, 2020

delete defunct function, fix indentation & spacing publiclab#8670

68f820c

noi5e added a commit to noi5e/plots2 that referenced this issue Dec 30, 2020

initialize on pageload (publiclab#8670)

24589fa

noi5e added a commit to noi5e/plots2 that referenced this issue Dec 30, 2020

change test to focus on image drag & drop publiclab#8670

5a6a114

cesswairimu added the JavaScript label Dec 31, 2020

noi5e self-assigned this Jan 3, 2021

This was referenced Jan 3, 2021

[Discussion] Add Unique HTML IDs to Comment Forms to Fix Image Upload Cross-Wiring Issues #8926

Closed

Add Unique HTML IDs to .dropzones, #fileinputs #8927

Merged

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 6, 2021

restore E.initialize call in drop publiclab#8670

5972fe8

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 6, 2021

undo E.initialize call publiclab#8670

540f112

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 7, 2021

assign unique IDs to comment form textareas publiclab#8670

43139a4

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 7, 2021

change ID selectors to class ones to match new IDs publiclab#8670

5e1baea

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 7, 2021

fix indentation publiclab#8670

20017fb

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 7, 2021

change ID reference to class reference publiclab#8670

bd6d4ef

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 7, 2021

initialize E with parameters in drop listener publiclab#8670

3a7a213

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 7, 2021

update tests for new text-input selectors publiclab#8670

5adc893

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 8, 2021

change ID text-input reference to class ref publiclab#8670

8eece2e

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 8, 2021

change text-input ID to class publiclab#8670

3ad1a7d

noi5e added a commit to noi5e/plots2 that referenced this issue Jan 8, 2021

drop: initialize E with params publiclab#8670

364beba

jywarren closed this as completed in #8897 Jan 8, 2021

noi5e mentioned this issue Jan 9, 2021

Add $D.selected Comment Documentation, Change .bind eventHandlers to .on #8982

Merged

noi5e mentioned this issue Jan 23, 2021

Comment Editor Overhaul Project [Outreachy] #9069

Open

noi5e mentioned this issue Jun 7, 2021

Prune Comment System Tests for Faster CI #9752

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Drag and drop feature of comment editor does not work properly when editing a comment #8670

Drag and drop feature of comment editor does not work properly when editing a comment #8670

urvashigupta7 commented Oct 23, 2020 •

edited

ghost commented Oct 24, 2020 •

edited by ghost

cesswairimu commented Oct 24, 2020

urvashigupta7 commented Oct 24, 2020

cesswairimu commented Oct 24, 2020 •

edited

ghost commented Oct 25, 2020

urvashigupta7 commented Oct 25, 2020

ghost commented Oct 25, 2020

ghost commented Oct 25, 2020

cesswairimu commented Oct 26, 2020

urvashigupta7 commented Oct 26, 2020

ghost commented Nov 11, 2020 •

edited by ghost

ghost commented Nov 12, 2020

urvashigupta7 commented Nov 12, 2020

ghost commented Nov 12, 2020

jywarren commented Dec 1, 2020

jywarren commented Dec 1, 2020

noi5e commented Dec 27, 2020

Drag and drop feature of comment editor does not work properly when editing a comment #8670

Drag and drop feature of comment editor does not work properly when editing a comment #8670

Comments

urvashigupta7 commented Oct 23, 2020 • edited

Steps to reproduce bug :

ghost commented Oct 24, 2020 • edited by ghost

cesswairimu commented Oct 24, 2020

urvashigupta7 commented Oct 24, 2020

cesswairimu commented Oct 24, 2020 • edited

ghost commented Oct 25, 2020

urvashigupta7 commented Oct 25, 2020

ghost commented Oct 25, 2020

ghost commented Oct 25, 2020

cesswairimu commented Oct 26, 2020

urvashigupta7 commented Oct 26, 2020

ghost commented Nov 11, 2020 • edited by ghost

ghost commented Nov 12, 2020

urvashigupta7 commented Nov 12, 2020

ghost commented Nov 12, 2020

jywarren commented Dec 1, 2020

jywarren commented Dec 1, 2020

noi5e commented Dec 27, 2020

urvashigupta7 commented Oct 23, 2020 •

edited

ghost commented Oct 24, 2020 •

edited by ghost

cesswairimu commented Oct 24, 2020 •

edited

ghost commented Nov 11, 2020 •

edited by ghost