I'm using react-select to create a dropdown for an open-source application which uses React/Redux and Electron. I'm using the bog-standard example code provided by react-select for this. However, when running, while the select box shows, clicking it seemingly does nothing. The dropdown that's meant to appear does not. When inspecting the HTML sources, it shows that when it's clicked, something does appear in the HTML, but this isn't visible in the app.
This is quite a large application and I don't know how much value there is in posting snippets of code; this one file alone is 500LoC. Does anyone have any ideas why this might be happening though?
The problem was the "overflow" option of the CSS was set to "hidden" by default. Setting this to "visible" in the CSS resolved this and now I the box appears as intended.
If anyone else has a similar issue, pause the application at runtime using the "debugger" command in console and check the CSS stylings of the element in question. I found this by accident but could help for future!
Related
I'm working on a couple of features for a project that I created a few months back when I was first learning React. I wanted to add a wysiwyg editor to one of my forms so that a user could have more control with the "about" section of an event page (i.e. embed media and images, html source code editing, font formatting, etc.)
The editor that I'm using is TinyMCE 5.0.
This project is a Rails backend and React frontend. (I'm not using Redux - this project was a way to practice React when I first learning it.)
You can find my last commit here if you would like to see my code
The Problem
I'm able to get the wysiwyg editor rendered. I can also type and format text inside the editor's body. When I click on the code icon or image embed icon (like in the gif below), a new modal appears but when I click into it to type, the text cursor appears and then disappears. So I can't type and it seems that the text area and fields become inactive (for lack of a better term - I'm still somewhat in the beginning of my coding journey.)
I just signed up and TinyMCE gives access to premium plugins as well, so I don't think it's an issue with my account permissions/subscription.
I'm also not receiving anything in the console but if there's any help you can provide, it would be appreciated!
Thanks!
TinyMCE 5 editor - text cursor issue - text areas become inactice
It is highly likely that the library you are using for your modal (that contains TinyMCE) is not allowing focus to go elsewhere. As you have not stated the library you use for your modal I can't tell you anything about how to address this but we know this is an issue with common libraries like Bootstrap:
https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog
Whatever you are using should have a similar ability.
I have set up a simple form with three checkboxes as shown below.
The problem arises when I use right to left with RTL support.
The boxes then cover the texts in a strange way.
I didn't set the alignment I have only changed the color to blue.
When I don't use RTL, checkboxes look fine!!
Also I tested on iPhone device and the same issue happens.
On Android devices, it works fine but it ignores RTL support!!
Please help me out and thanks in advance.
I think there is a regression with the CheckBox and the opposite side mode. Please file an issue on that. The workaround is to disable the opposite side mode either via the theme constant or:
cb.setOppositeSide(false);
I followed draft-js document to create a very simple demo of draft-js.
Everything seems work well, but when I open the url in Chrome, I can only see a white blank page (there is a hidden editor component there but is not visible)
There is no error on the console of the browser.
The demo project is here: https://github.com/js-demos/react-draft-js-demo, you can clone it and follow the readme to run it.
I have reviewed the code very carefully, but can't figure out why.
If you just use the sample code on the official website of Draft.js, you will see nothing on the page. It's just a blank text input field. If you click that field, you could type something. Draft.js is not a out of the box plugin, but a "a framework for building rich text editors in React".
Hope you figured it out, if not (or for anyone else), the solution for me was two step:
Download the Draft.css file and include it in your source code.
Reference said file in your index.html as such:
<link rel="stylesheet" href="./src/components/Draft.css" />
In other words, your problem was to do with the styling of the Draft-js Editor, since for you the editor was 'hidden' i.e. without any discernible box around it etc.
Actually, I tried a lot to solve this problem but in vain. What I did is using another package that is built on the top of draft js, and It's working fine.
you can find it here:https://jpuri.github.io/react-draft-wysiwyg/#/
I'm no genius, but might I recommend this:
https://www.youtube.com/watch?v=XGxdCXyMC7k
In short, it looks like the default is just a Rich Text Editor enabler type thing. You want more of a single instance, like their demo in the 'Rich Styling' section of the docs.
I had my app working just fine a few days ago and then I noticed the first problem. I had to tap twice in order to make a button go to the next screen. Also happened to the checkBoxes. Had to tap twice to make them change.
But now it got serious. Since yesterday when I tap on a TextField the app freezes and then crashes.
The only significant changes I remember I did were 2: I uploaded an image for the App Icon and I edited the TitleArea UIID. I removed the TOP and BOTTOM margins. It also affected some of my label and button UIID, because now they don't show on the device
When I run the simulator, the doble tap also occurs, but the TextFields work fine and the Button and Label UIID look the way they should.
Any ideas why this happens?
I am right now working with old versions to try to determine the reason, but no luck so far. Thanks
Use a solid color rather than a gradient with the same colors. Gradients are slow and problematic across platforms so you are paying a lot for something that you aren't even using.
We'll need a better test case to reproduce crashing, I think that what you initially saw when you submitted the issue was a regression in the text input that we since resolved in the build servers.
In the sencha documentation page, when I click a class, a class tap appears, and there will be a toobar up there usually features two buttons (are they buttons) "properties" and "methods". When the mouse is on these two buttons, a overall properties/methods list will appear.
It seems that list is dynamically generated. Can anyone please help. I'd like to do a similar page on my site, but I don't know how to do this.
Sencha uses JSDuck (https://github.com/senchalabs/jsduck) to generate the documentation. There are instructions in the repo regarding how to add your own classes to it, and it's pretty easy to do. Additionally, you should be able to see the source for how they are handling the menus/dropdowns.