{"action":"created","issue":{"url":"https://api.github.com/repos/casesandberg/react-color/issues/179","repository_url":"https://api.github.com/repos/casesandberg/react-color","labels_url":"https://api.github.com/repos/casesandberg/react-color/issues/179/labels{/name}","comments_url":"https://api.github.com/repos/casesandberg/react-color/issues/179/comments","events_url":"https://api.github.com/repos/casesandberg/react-color/issues/179/events","html_url":"https://github.com/casesandberg/react-color/issues/179","id":159991223,"number":179,"title":"Unable to select hex input ","user":{"login":"scottbarrow","id":5571736,"avatar_url":"https://avatars.githubusercontent.com/u/5571736?v=3","gravatar_id":"","url":"https://api.github.com/users/scottbarrow","html_url":"https://github.com/scottbarrow","followers_url":"https://api.github.com/users/scottbarrow/followers","following_url":"https://api.github.com/users/scottbarrow/following{/other_user}","gists_url":"https://api.github.com/users/scottbarrow/gists{/gist_id}","starred_url":"https://api.github.com/users/scottbarrow/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/scottbarrow/subscriptions","organizations_url":"https://api.github.com/users/scottbarrow/orgs","repos_url":"https://api.github.com/users/scottbarrow/repos","events_url":"https://api.github.com/users/scottbarrow/events{/privacy}","received_events_url":"https://api.github.com/users/scottbarrow/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/casesandberg/react-color/labels/in%20progress","name":"in progress","color":"4A90E2"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-06-13T16:26:25Z","updated_at":"2016-09-21T10:25:47Z","closed_at":"2016-09-21T08:02:47Z","body":"I have setup a colorpicker with a swatch and popover as per the demo\r\nThe colour selector and the color presets are able to be clicked, however the hex input cannot.\r\nThis only occurs when the popover is in use.\r\n\r\nThis can be replicated on the http://casesandberg.github.io/react-color/ demo page\r\n**Replicate:**\r\n* Select the color swatch to open the colorpicker\r\n* Attempt to select the hex input\r\n\r\n**Expected:**\r\n* To be able to select and input a hex color\r\n\r\n**Actual**\r\n* Colorpicker closes, unable to select input.\r\n\r\nIf the popover element is deleted from the DOM, the input can be selected.\r\nI suspect his is an ordering z-index issue\r\n"},"comment":{"url":"https://api.github.com/repos/casesandberg/react-color/issues/comments/248571800","html_url":"https://github.com/casesandberg/react-color/issues/179#issuecomment-248571800","issue_url":"https://api.github.com/repos/casesandberg/react-color/issues/179","id":248571800,"user":{"login":"m90","id":1662740,"avatar_url":"https://avatars.githubusercontent.com/u/1662740?v=3","gravatar_id":"","url":"https://api.github.com/users/m90","html_url":"https://github.com/m90","followers_url":"https://api.github.com/users/m90/followers","following_url":"https://api.github.com/users/m90/following{/other_user}","gists_url":"https://api.github.com/users/m90/gists{/gist_id}","starred_url":"https://api.github.com/users/m90/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/m90/subscriptions","organizations_url":"https://api.github.com/users/m90/orgs","repos_url":"https://api.github.com/users/m90/repos","events_url":"https://api.github.com/users/m90/events{/privacy}","received_events_url":"https://api.github.com/users/m90/received_events","type":"User","site_admin":false},"created_at":"2016-09-21T10:25:47Z","updated_at":"2016-09-21T10:25:47Z","body":"FWIW here are my 2 cents on how to solve this:\r\n\r\nApplying an even higher z-index on the wrapper is not really solving the root cause which is the fact that the div wrapping the input is not generating any stacking context due to a lacking positioning value.\r\n\r\nI \"fixed\" it using\r\n\r\n```css\r\n.sketch-picker > div > div{\r\n \tposition: relative;\r\n }\r\n```\r\nwhere `.sketch-picker` wraps the component.\r\n\r\nIf you'd be up for a PR, I'd be happy to fix it that way in-library."}}
{"actor":{"display_login":"m90"}}