To reproduce I referenced Multi-line and the mentions did not work but when I click outside the multiline it produced the error and comes up with an error alert on the screen.
In the work flow references the field - when multiline input value changes.
Did u put in a color on the plug-ins tab?
If you could share a link to the editor I can take a look
Thanks @gaurav
I got it working by putting in a colour, maybe stick in a default if you can might assist new users.
But, there is still an issue with being able to reference the Multiline field inside a repeating group for the ID Attribute - seems you can not reference the field directly.
It works with a field inside a group, because you can reference the input element, but not inside repeating group.
I followed this example and still can not get it to work inside a repeating group.
It works if you put the multi inside a single group but the following does not work.
1.Set up a group
2. Inside the group add a repeating group
3. Inside this repeating group add another group
4. Inside that group add a multi line field
Use case is below.
I can take a look if u share a link to the editor
I am a bit hesitant to share the editor as it have a lot of work and IP in it!
why not recreate n a separate app and share … i’m afraid i cant help without actually seeing how you’ve configured it
OK I will have play with this tomorrow - and share (been long day)
Much appreciated!
Hi @gaurav
I have found the issue and have included a demo.
If the multi field is not visible on page load it disables the plugin, so when you toggle the multi line it fails.
In the example I have added a basic multi in a group (works) and a repeating group > group (with the initial state hidden), just click toggle to reveal and test input.
Cheers!
Lol yeah ofcourse that would happen. I wasn’t aware the element was hidden.
The way bubble works is that it renders only the required elements on the page. Just because it’s on the bubble editor doesn’t mean its on your actual site at every moment. When the plugin adds the feature to all multiline inputs on the page, the one you want to use should ‘exist’. The way to overcome this is to trigger the setup mentions action after the multiline input is visible on the page.
Have fun with the plugin!
OK, for anyone who is having the same challenge I will leave the example up (see above) and include the solution.
The way to overcome not being able to reference the group within a repeating group directly.
Set a custom state on the repeating group within the main group, so every time you click on a link or button it sets the custom Yes/No state to “Yes”. It’s probably not necessary but on page load I also set the custom state to “No” - when you click the toggle button as part of the Workflow it first “Toggles” the view to visible and it then sets the state to “Yes” and then Bubble loads the Mentions plugin when the multi line text field is visible based on the value of the custom state. The work-flow then waits 500 ms before resetting the state to “No” ready for the next repeating group.
Most obvious option below:
In most Instances when you simply want to hide a field and then enable mentions you can just put it in the work flow after the Toggle option in the text field. In most cases this will work! Use the above if you need to associate it with something else.
Also don’t forget to add in the required coloured options in the plugin settings as @gaurav mentions above.
HI @gaurav
All sorted and added in some examples for other if they are trying to do similar things.
I did notice though that the space between the “@ name” is back as discussed in previous versions.
Check out in the examples in links above.
Here’s a simple working demo:
Demo:
Editor:
Hello, Having some trouble setting up the plugin, any idea what the issue could be?
TypeError: Cannot read property ‘split’ of null
at eval (eval at p.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:100:13188), :3:204)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:101:2300
at T (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:100:25624)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:101:2256
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:29555
at Ct (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:28515)
at evaluate (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:29484)
at new e (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:30443)
at Object.He.Watcher (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:28713)
at Object.He.run_once (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:27246)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:101:2226
at Object.He.run_without_catching_not_ready (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:26404)
at Object.I.i.run (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:101:2175)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:96:15944
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12983
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12723
at e._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12309)
at e.then (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12671)
at e.callback (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12959)
at n.run (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:96:15780)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:27657
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12723
at e._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12309)
at e.then (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12671)
at t.run_subsequent_actions (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:27382)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:24895
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12723
at e._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12309)
at e.then (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12671)
at t._run_workflow (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:24870)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:18868
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12723
at e._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12309)
at e.then (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12671)
at i (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:18843)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:18939
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12723
at e._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12309)
at e.then (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12671)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:18695
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12723
at e._attach_success (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12309)
at e.then (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12671)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:33:18650
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12983
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12723
at e.resolve (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:12154)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:27414
at t (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:103:631)
at t (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:31798)
at evaluate (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:30196)
at Object.run_me (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:102:29341)
at t (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/294e0648193a1f88db25b5150a1bee389c126151e09ba03b1a90797ad4e7af4f/xfalse:103:5875)This text will be hidden
Can u share a link to editor? Can’t debug based on error message alone. Do check out the links to the demo version I posted.
Have done that, doesn’t seem to help, i’ll send you a Private Message with the link
Hey @gaurav
Do you know why it is putting a space between the “@” and “name” when puling the data from the database.
In your example it doesn’t, but the difference is you are pulling the data from the text field.
Can you show an example pulling from the database?
HI @gaurav
I have found repeatable test which may give you some indication why the space is being added.
It appears that the first record in the database does not produce the space but all other records after the first add a space between the “@” and the “Name” this would be why some people reported seeing it and other times not.
Is there a fix or something that needs to be done to stop this in the current version?
